编辑 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>
最佳答案
编辑 2:
我已经添加了一个 fiddle ,它完全可以满足您的需求,但请注意第 nth-child 在 IE8 中的表现不佳。它还假设您提供给我们的 HTML 始终如此[即始终具有相同数量的 th/td]。
编辑:
您发布的 html 总是这样吗?即永远不会有更多或更少的标题等?
这不是您想要的 100%,但它有点接近。要准确获得您想要的结果,您必须使用 :nth-child 进行大量手动绝对定位,这太可怕了。
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%;
}
关于html - 如何用CSS实现这种表格布局?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23888040/