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

Question

我希望将HTML表格中每个<tr>元素的边框顶部在两侧无缝扩展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>

边框的高度好像是2px而不是1px。我该如何解决这个问题，以使两侧的边框都是无缝的？

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>