表格边框宽度和颜色的相互作用

Question

我正在使用border-right向标题单元格添加一些填充。 （我使用border-right代替padding的原因是因为实际上我想要移动背景上的图像。

table {
    border: solid 2px red;
}

th {
  background-color: #ccc; 
  border-right: 25px solid transparent; 
  border-bottom: 1px solid black; 
}

th:after {
 content: "x"; 
 color: red;
}

td:before {
 content: "cell"
}

<table> 
  <thead>
  <tr> 
    <th> foo</th>
    <th> bar </th>
    <th> bizz</th> 
    
    <tr>
  </thead>
  
  <tr> 
    <td/><td/><td/> 
  </tr>
</table>

您可以看到border-bottom和border-right之间存在有趣的互动。有没有办法来解决这个问题？

Answer 1

这种情况正在发生，因为底部边框正在尝试连接右边框，而右边框的底部实际上并不是底部边框。也许您可以使用填充与相应的background-clip属性相结合。