表格应为全尺寸浏览器，主体居中

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

结果：