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

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

姓名 介绍
田所浩二 24岁,是学生
蔡徐坤 喜欢唱、跳、rap、篮球

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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
}

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

姓名 介绍
田所浩二 24岁,是学生
蔡徐坤 喜欢唱、跳、rap、篮球

如何解决这个问题呢?

我在 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 的选择器简单地修改一下,最后就能达成最开始所展示的预期效果了。

1
2
3
4
- thead {
+ th {
border-bottom: 10px skyblue solid;
}
作者

PinkChampagne17

发布于

2022-04-16

更新于

2022-04-16

许可协议

 CC BY-NC-SA 4.0