html - 如何用CSS实现这种表格布局？

Question

编辑 2:我说的是表格的布局，而不是颜色。

我需要设计我的表格，使其看起来像这样:

想法是让第一个 td 对在上面，其余的应该在它下面。

通过 CSS 可行吗？

我无法控制此处的 HTML，因此 CSS 是我唯一的选择。

编辑:这是 HTML

<div class="content">
      <table>
         <thead>
      <tr>
                  <th class="thtitle" >
            Title         </th>
                  <th class="thvalue" >
            Value         </th>
                  <th class="thquantity" >
            Quantity          </th>
                  <th class="thsum" >
            Sum          </th>
              </tr>
    </thead>
    <tbody>
          <tr class="first">
              <td class="tdtitle" >…</td>
<td class="tdvalue" >…</td>
<td class="tdquantity" >…</td>
<td class="tdsum" >…</td>

</tr>
          <tr class="last">
              <td class="tdtitle" >…</td>
<td class="tdvalue" >…</td>
<td class="tdquantity" >…</td>
<td class="tdsum" >…</td>
              </tr>
      </tbody>
</table>
</div>

Answer 1

编辑 2:

我已经添加了一个 fiddle ，它完全可以满足您的需求，但请注意第 nth-child 在 IE8 中的表现不佳。它还假设您提供给我们的 HTML 始终如此[即始终具有相同数量的 th/td]。

http://jsfiddle.net/8awAj/

编辑:

您发布的 html 总是这样吗？即永远不会有更多或更少的标题等？

这不是您想要的 100%，但它有点接近。要准确获得您想要的结果，您必须使用 :nth-child 进行大量手动绝对定位，这太可怕了。

http://jsfiddle.net/9JWpA/

table {
    width: 100%;
    padding-top: 40px;
    position: relative;
}

th {
    background: yellow;
}

td {
    background: green;
}

th,
td {
    top: 40px;
    width: 16.666%;
    position: absolute;
}

th:first-child,
td:first-child {
    width: 100%;
    top: 0;
    left: 0;
}
td:first-child {
    top: 20px;
}

th:nth-child(2) {
    left: 0;  
}
td:nth-child(2) {
    left: 16.666%;    
}
th:nth-child(3) {
    left: 33.333%;  
}
td:nth-child(3) {
    left: 49.998%;    
}
th:nth-child(4) {
    left: 66.666%;  
}
td:nth-child(4) {
    left: 83.33%;    
}