HTML 表格边框交叉点冲突解决方案

前段时间有这么个需求，需要把表格修改成下面这个样式：

最开始编写的 HTML 与 CSS 如下：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>介绍</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>田所浩二</td>
      <td>24岁，是学生</td>
    </tr>
    <tr>
      <td>蔡徐坤</td>
      <td>喜欢唱、跳、rap、篮球</td>
    </tr>
  </tbody>
</table>

td,
th {
  text-align: center;
  padding: 0px 10px;
}

table {
  border: 1px skyblue solid;
}

thead {
  border-bottom: 10px skyblue solid;
}

td:first-child {
  border-right: 10px palevioletred solid;
}

然而实际结果的结果如下，我们可以看到竖线与横线的交叉点是使用了竖线的颜色，而不是横线的颜色。

如何解决这个问题呢？

我在 CSS 规范中找到有这么一节内容，讲述了这个问题（原文）：

If border styles differ only in color, then a style set on a cell wins over one on a row, which wins over a row group, column, column group and, lastly, table. When two elements of the same type conflict, then the one further to the left (if the table's 'direction' is 'ltr'; right, if it is 'rtl') and further to the top wins.

如果边框的样式区别只有颜色不同，则表格中的单元格会优先于行、行组、列、列组，以及表格边框的样式。当两个具有相同类型的元素冲突时，则最左边（如果 direction 为 'ltr'，否则反之）和最上面的元素优先。

按照这个规则，我们将 CSS 的选择器简单地修改一下，最后就能达成最开始所展示的预期效果了。

- thead {
+ th {
  border-bottom: 10px skyblue solid;
}