css - 在 CSS 中将表格外的文本与表格中的列对齐

Question

我有一个有 9 列的表，在第 8 列下，我想打印该列的总数（我已存储在一个变量中）。如何对齐文本以使其显示在第 8 列下？

我目前在 h5 标签中有总数，但如果这阻止了对齐，我愿意更改它。

<table> ...stuff
</table>
<h5>TOTAL!</h5>    <---- this should appear under column 8 of the table

Answer 1

最好的方法是将它放在表格本身中，但是如果这不是一个选项，请使用 javascript 对齐您的 h5。获取第 8 列的 x 偏移量并将该值应用于您的 h5。如果您可以提供更完整的标记示例，我可以提供一个示例。

编辑：

由于您没有提供标记，因此我创建了一个示例。您应该能够将其要点应用到您的代码中。

html

<table>
    <thead>
        <tr>
            <td>head 1</td>
            <td>head 2</td>
            <td id="totalcol">head 3</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>body 1</td>
            <td>body 2</td>
            <td>body 3</td>
        </tr>
    </tbody>
</table>
<p id="total">Some total</p>

js

var left = $('#totalcol').offset().left;
$("#total").css("margin-left",left);

http://jsfiddle.net/H62wV/

Answer 2

假设所有列的宽度相等：

.p9 { /* p9 for 9 column table of equal width */
  width: 11%;
}
h5 {
  margin-left: 88%; /* 11 x 8 */
}
<table>
  <tr>
    <td class="p9">
      ...
    </td>
  </tr>
</table>
<h5>TOTAL!</h5>

Answer 3

我相信，如果你走桌子，你应该坚持到最后。

要显示第三列总数，我会这样做：

<TABLE>
<THEAD>
     <TR>
     <td>head 1</td>
     <td>head 2</td>
     <td>head 3</td>
    </tr>
</THEAD>
<TFOOT>
     <TR>
     <td></td>              <<-- notice the empty cells
     <td></td>
     <td>TOTAL</td>   
    </tr>
</TFOOT>
<TBODY>
     <TR>
     <td>body 1</td>
     <td>body 2</td>
     <td>body 3</td>
    </tr>
</TBODY>
</TABLE>

这样对齐是自动的。（注意页脚推荐的位置在正文之前）

Answer 4

您的表格是实际的 HTML 表格还是表现得像表格的 CSS div？