我想实现如下效果:
我必须使用的 HTML 是一个简单的表格:
<table id="a">
<thead>
<tr>
<td>normal</td>
<td>grey</td>
<td>normal</td>
</tr>
</thead>
<tbody>
<tr>
<td>normal</td>
<td>grey</td>
<td>normal</td>
</tr>
<tr>
<td>normal</td>
<td>grey</td>
<td>normal</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>normal</td>
<td>grey</td>
<td>normal</td>
</tr>
</tfoot>
</table>
为了获得圆形边框,我必须更改 td
元素以显示为 inline-block
。
我的问题出在灰色带上。我最终在行之间留有空白。我不能使用单独的背景元素,因为行数会改变。 编辑: 我需要边框之间的间距,但希望灰色列中的白色间隙也变成灰色...
我的尝试在这里:https://jsfiddle.net/h5Lh1eaw/24/
是否有我不知道的魔法 CSS 可以做到这一点?
最佳答案
是的!你必须给 border-collapse: collapse
到 <table>
你有:
CSS
table#a, table#b {
border-collapse: collapse;
}
预览:
片段
* {
box-sizing: border-box;
}
table#a {
border-collapse: collapse;
}
table#b {
border-collapse: collapse;
}
td:nth-child(2) {
background-color: #c0c0c0;
}
tbody tr {
margin: 5px;
}
td {
display: inline-block;
padding: 3px;
width: 200px;
}
tbody td {
border-top: 1px solid black;
border-bottom: 1px solid black;
}
tbody td:first-of-type {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-left: 1px solid black;
}
tbody td:last-of-type {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-right: 1px solid black;
}
<p>
A:
</p>
<table id="a">
<thead>
<tr>
<td>normal</td>
<td>grey</td>
<td>normal</td>
</tr>
</thead>
<tbody>
<tr>
<td>normal</td>
<td>grey</td>
<td>normal</td>
</tr>
<tr>
<td>normal</td>
<td>grey</td>
<td>normal</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>normal</td>
<td>grey</td>
<td>normal</td>
</tr>
</tfoot>
</table>
<p>
B:
</p>
<table id="b">
<thead>
<tr>
<td>normal</td>
<td>grey</td>
<td>normal</td>
</tr>
</thead>
<tbody>
<tr>
<td>normal</td>
<td>grey</td>
<td>normal</td>
</tr>
<tr>
<td>normal</td>
<td>grey</td>
<td>normal</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>normal</td>
<td>grey</td>
<td>normal</td>
</tr>
</tfoot>
</table>
JSFiddle: https://jsfiddle.net/gfqrL8n0/
关于html - 在 HTML 表格中使用 CSS 交叉,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49669123/