如何将thead的文本在表格中居中

Question

假设我有以下简单表格：

  <style type="text/css"> table#one { width: 100%; } </style> <table id="one"> <thead> <tr> <th colspan="1" >Top Title</th> </tr> </thead> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table> 

我希望“ Top Title”恰好位于表格的顶部中间，但我不知道是否有可能获得这种效果。 有什么建议吗？

提前致谢

Answer 1

只需使用colspan=3来确保您的标题跨越表中的所有列：

<th colspan="3">Top Title</th>

例

 table#one { width: 100%; } 

 <table id="one"> <thead> <tr> <th colspan="3">Top Title</th> </tr> </thead> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table> 

Answer 2

将colspan的1更改为colspan的3。您的colspan应该是<td>元素的数量，以使其居中。

  <style type="text/css"> table#one { width: 100%; } </style> <table id="one"> <thead> <tr> <th colspan="3" >Top Title</th> </tr> </thead> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>