Question

我正在尝试制作一个表头，其中两个嵌套在另一个中。

示例| th1 | th2 | th3 | th6 | th7 | | | | th4 th5 | | | 面板将此处的布局弄乱了，但是th4和th5应该在th3之下，而一切（似乎）都保持在一行中。

很抱歉，描述可能含糊不清... 原则上，我现在只允许使用html ...

Answer 1

我认为您正在寻找这种桌子。

.zui-table {
    border: solid 1px #DDEEEE;
    border-collapse: collapse;
    border-spacing: 0;
    font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
    background-color: #DDEFEF;
    border: solid 1px #DDEEEE;
    color: #336B6B;
    padding: 10px;
    text-align: left;
    text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td {
    border: solid 1px #DDEEEE;
    color: #333;
    padding: 10px;
    text-shadow: 1px 1px 1px #fff;
}
.zui-table-zebra tbody tr:nth-child(odd) {
    background-color: #fff;
}
.zui-table-zebra tbody tr:nth-child(even) {
    background-color: #EEF7EE;
}
.zui-table-horizontal tbody td {
    border-left: none;
    border-right: none;
}

<table class="zui-table zui-table-zebra zui-table-horizontal">
  <col>
  <colgroup span="2"></colgroup>
  <colgroup span="2"></colgroup>
  <tr>
    <td rowspan="2"></td>
    <th colspan="2" scope="colgroup">Mars</th>
    <th colspan="2" scope="colgroup">Venus</th>
  </tr>
  <tr>
    <th scope="col">Produced</th>
    <th scope="col">Sold</th>
    <th scope="col">Produced</th>
    <th scope="col">Sold</th>
  </tr>
  <tr>
    <th scope="row">Teddy Bears</th>
    <td>50,000</td>
    <td>30,000</td>
    <td>100,000</td>
    <td>80,000</td>
  </tr>
  <tr>
    <th scope="row">Board Games</th>
    <td>10,000</td>
    <td>5,000</td>
    <td>12,000</td>
    <td>9,000</td>
  </tr>
</table>

我如何“嵌套”表头中的其他内容

1 个答案: