HTML 表格边框交叉点冲突解决方案
前段时间有这么个需求,需要把表格修改成下面这个样式:
姓名 | 介绍 |
---|---|
田所浩二 | 24岁,是学生 |
蔡徐坤 | 喜欢唱、跳、rap、篮球 |
最开始编写的 HTML 与 CSS 如下:
1 | <table> |
1 | td, th { |
然而实际结果的结果如下,我们可以看到竖线与横线的交叉点是使用了竖线的颜色,而不是横线的颜色。
姓名 | 介绍 |
---|---|
田所浩二 | 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 | - thead { |
HTML 表格边框交叉点冲突解决方案
http://pinkchampagne17.github.io/blog/2022/04/16/HTML表格边框交叉点冲突解决方案/