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

Question

让我们说我有以下简单的表格：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我喜欢＆＃34; Top Title＆＃34;完全位于表格的中间位置，但我不知道是否可以获得此效果。有什么建议吗？

提前致谢

Answer 1

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

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

示例

＆＃13;

＆＃13;

table#one {
  width: 100%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;