如何使下边框颜色覆盖右边框颜色？

Question

在下面的示例中，右边框颜色优先于底部边框颜色。

有没有办法让水平边框线在穿过垂直线时不中断？

table th,
table td {
  border-right: 10px solid rgba(229, 231, 235);
  border-bottom: 10px solid rgba(229, 231, 235);
}

table th {
  border-bottom: 10px solid rgba(156, 163, 175);
}

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<table>
  <tr>
    <th>a</th>
    <th>b</th>
  </tr>
  <tr>
    <td>1</td>
    <td>1</td>
  </tr>
</table>

- Alex Craft

---

你期望哪种结果？是 https://nimb.ws/MNZgBq 还是你的图片？ - m4n0

在 Chrome 中，我可以看到连续的深灰色线条，在 Edge 91 中它看起来像您帖子中的图像（被浅灰色边框打断）。 - Pan Vi

@m4n0 希望水平线不受干扰，就像您发布的图片 nimb.ws/MNZgBq 上那样。 - Alex Craft

Answer 1

这是你想要的吗？

table th,
table td {
  border-right: 10px solid rgba(229, 231, 235);
  border-bottom: 10px solid rgba(229, 231, 235);
}
table tr{
  border-bottom: 10px solid rgba(229, 231, 235);
}
table th {
  border-bottom: 10px solid rgba(156, 163, 175);
}

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<table>
  <tr>
    <th>a</th>
    <th>b</th>
  </tr>
  <tr>
    <td>1</td>
    <td>1</td>
  </tr>
</table>

- Praneeth Kumar

---

谢谢，但它在 Firefox 中可行而在 Chrome 中不可行。 - Alex Craft