Table Thead 是浏览器的全尺寸，tbody 居中

Question

您好，我正在尝试实现如下所示：

因此，thead 是屏幕宽度的 100%，但 tbody 居中。

我有以下标记：

<table>
  <thead>
    <tr>
      <th>Test</th>
      <th>Test</th>
      <th>Test</th>
      <th>Test</th>
      <th>Test</th>
      <th>Test</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
    </tr>
  </tbody>
</table>

我还做了一个JSFiddle：http://jsfiddle.net/3KYWL/

编辑：对不起，我应该提到，因为我使用的是数据表 jQuery 插件，所以我必须：

1. 只有一张桌子
2. thead 和 tbody 中的列数相同

Answer 1

请看下面的jsfiddle。 http://jsfiddle.net/3KYWL/13/

HTML：

<table class="centered">
  <thead>
    <tr>
      <th>Test</th>
      <th>Test</th>
      <th>Test</th>
      <th>Test</th>
      <th>Test</th>
      <th>Test</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
    </tr>
  </tbody>
</table>

CSS：

table { 
    border-spacing: 0;
    border-collapse: collapse;
}

.centered{
    margin:auto;
    width:100%;
}

thead th, tbody td {
    padding:15px;
    text-align:left;
}

thead {
    background:green;
    display: table;
    width: 100%;
}

thead tr {
     width: 75%;
     display: table;
     margin: 0 auto;
}

tbody {
    width: 75%;
    display: table;
    background:aqua;
    margin: 0 auto;
}

结果：