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

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

Answer 3

假设所有列的宽度相等：

.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 4

我相信如果你要走桌子，你应该把它带到最后。

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

<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>

这种对齐方式是自动的。（请注意，页脚推荐的位置在身体之前）

将表外的文本与CSS中的表中的列对齐

4 个答案: