html - 之前使用 CSS 水平扩展 元素的 border-top

Question

我希望扩展每个 <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 像素。我该如何解决这个问题，以便两侧的边框是无缝的？

Answer 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>