我想创建一个只有部分分隔边框的表格。上下边界thead
之间应该没有空格。但是里面的其他人应该被一个小空间隔开。
不幸的是,该border-spacing
样式仅适用于整个表格:https ://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing
例如,在下面我只想在border-top
ofh2.1
和之间有空格h2.2
。那可能吗?
HTML:
<table>
<thead>
<tr>
<th rowspan="2">h1</th>
<th colspan="2">h2</th>
</tr>
<tr>
<th>h2.1</th>
<th>h2.2</th>
</tr>
</thead>
<tbody>
<tr>
<td>b1</td>
<td>b2.1</td>
<td>b2.2</td>
</tr>
<tr>
<td>b1</td>
<td>b2.1</td>
<td>b2.2</td>
</tr>
</tbody>
</table>
CSS:
table {
border-collapse: separate;
}
th,
td {
vertical-align: top;
}
thead tr:first-child th {
border-top: 2px solid;
}
thead tr:not(:first-child) th {
border-top: 1px solid;
}
tbody tr:first-child td {
border-top: 1px solid;
}
tbody tr {
border-top: 1px solid;
}
小提琴:https ://jsfiddle.net/6ov4hadd/
编辑
这是一个更明智的例子。
小提琴:https ://jsfiddle.net/Lnk929q4/
我想让它看起来像一个“书桌”: