表格样式的层叠顺序与优先级

最新推荐文章于 2024-06-16 17:29:19 发布

原创最新推荐文章于 2024-06-16 17:29:19 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经允许禁止转载

css 专栏收录该内容

11 篇文章

订阅专栏

本文探讨了在CSS中为col元素设置边框时遇到的显示问题，特别是当边框宽度为1px时的特殊情况。文章深入分析了表格布局模型下，单元格、行和列的层叠顺序与优先级，以及不同边框宽度和样式的覆盖规则，为解决类似问题提供了详细的指导。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在复习基础知识时，在mdn上练习table相关的内容，被一个奇怪的现象困扰了很久：为col设置border:1px solid black;没有显示，当把宽度设置为2px时就可以显示出来，测试代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>aaaa</title>
	<style type="text/css">
		table{
			border-collapse: collapse;
		}
		table td, th{
			border:1px solid red;
		}
		col:nth-child(2){
			border:1px solid black;
		}
	</style>
</head>
<body>
	<table>
		<colgroup>
			<col>
			<col>
		</colgroup>
		<tr>
			<th>1111</th>
			<th>2222</th>
			<th>2222</th>
		</tr>
		<tr>
			<td>11233</td>
			<td>11233</td>
			<td>11233</td>
		</tr>
		<tr>
			<td>11233</td>
			<td>11233</td>
			<td>11233</td>
		</tr>
	</table>
</body>
</html>

这其中需要注意的点为：

如何定义列组和行组的样式
表格中的层叠顺序与优先级

定义列组和行组样式

单元格位于表格的行和列交叉点上，根据表格布局模型，单元格应从属于行，而不是列。并且多个同列的单元格可以形成一个列组。列组对象所支持的属性：

border: 定义指定列或者列组的边框。只有当<table>标签声明了border-collapse:collapse;时，为列定义的border属性才有效。
background: 当单元格或行没有自己定义的背景或者为透明背景background-color:rgba(0,0,0,0)时适用
width:定义列或列组的最小宽度

表格样式的层叠顺序

表格对象的样式层叠顺序
td元素的样式具有最大优先权。如果单元格为透明（未额外定义样式），那么行（tr元素具有最大优先权）。table定义的背景优先权最低，其他元素都为透明时，才可看到表格背景。

边框覆盖的规则和顺序

如果定义了border-style:hidden; 那么它的优先级高于任何其他相冲突的边框。
border-style:none;的优先级最低,只有在该边汇集的所有元素的边框属性都是none，该边框才会被省略，不然就会显示出边框。
.
更宽的边框将覆盖更窄的边框。（开头的疑惑解释）。
如果若干边框的border-width属性值相同，那么样式的优先顺序将根据边框样式类型排序，从高到低依次为：double，solid，dashed, dotted, ridge, outset, groove以及inset.
如果边框样式只有颜色上的区别，那么样式的优先顺序将根据元素类型进行排序，优先级从高到低依次为：td, tr, thead(tbody, tfoot), col, colgroup以及table。