我希望扩展每个 <tr>
的边框顶部HTML 表格中的元素无缝地在两侧 1rem。
body {
padding: 4rem;
}
table {
border-collapse: collapse;
}
tr {
border-top: 1px solid #000;
}
tr:before {
content: '';
display: block;
width: 2rem;
border-top: 1px solid black;
}
tr:after {
content: '';
display: block;
width: 2rem;
border-top: 1px solid black;
}
td {
padding-top: 1rem;
padding-bottom: 1rem;
}
<table>
<tr><td>Hello</td><td>Goodbye</td></tr>
<tr><td>Hello</td><td>Goodbye</td></tr>
<tr><td>Hello</td><td>Goodbye</td></tr>
</table>
边框的高度似乎是 2 像素而不是 1 像素。我该如何解决这个问题,以便两侧的边框是无缝的?
最佳答案
不要使用border-collapse: collapse
。
body {
padding: 4rem;
}
table {
border-spacing: 0;
}
td {
border-top: 1px solid #000;
}
tr:before {
content: '';
display: block;
width: 2rem;
border-top: 1px solid black;
}
tr:after {
content: '';
display: block;
width: 2rem;
border-top: 1px solid black;
}
td {
padding-top: 1rem;
padding-bottom: 1rem;
}
<table>
<tr><td>Hello</td><td>Goodbye</td></tr>
<tr><td>Hello</td><td>Goodbye</td></tr>
<tr><td>Hello</td><td>Goodbye</td></tr>
</table>
关于html - 之前使用 CSS 水平扩展 <tr> 元素的 border-top,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53399231/