Question

编辑2：我说的是桌子的布局，而不是颜色。

我需要设置我的表格样式，使其显示为：

enter image description here

这个想法是让第一对在顶部，其余的应该在它下面。

通过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：

我已经添加了一个完全符合你想要的小提琴，但是要警告说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%;    
}

Answer 2

试试这个..

http://jsfiddle.net/9JWpA/

<强> HTML：

<table cellspacing=0;>
    <tr><th colspan="6">th</th></tr>
    <tr><td colspan="6">td</td></tr>
    <tr><th>th</th><td>td</td><th>th</th><td>td</td><th>th</th><td>td</td></tr>
</table>

<强>的CSS：

table
{
    width:200px;
    border:1px solid black;
    text-align:left;
}

th
{
    background:yellow;
}
td
{
    background:green;
}

如何用CSS实现这个表格布局？

2 个答案: