[英]How to style a table with only partly border spacing?
我想创建一个仅具有部分分隔的边框的表。 上方和下方的边框thead
应该是没有之间的空格。 但是其中的其他位置应以较小的空间隔开。
不幸的是, border-spacing
样式仅适用于整个表格: https : //developer.mozilla.org/en-US/docs/Web/CSS/border-spacing
例如,在下面的内容中,我只希望在h2.1
和h2.2
的border-top
之间h2.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/
我想看起来像一个“书桌”:
您可以尝试将两个不同的表用于头部和身体部位。 像这样
https://jsfiddle.net/6ov4hadd/1/
<table id = "table1">
<thead>
<tr>
<th rowspan="2">h1</th>
<th colspan="2">h2</th>
</tr>
<tr>
<th>h2.1</th>
<th>h2.2</th>
</tr>
</thead>
</table>
<table>
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.