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

编辑：对不起，我应该提到，因为我使用datatables 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;
}

结果：