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

小鱼儿 2022-04-27 17:20 258阅读 0赞

最近在复习基础知识时，在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>

这其中需要注意的点为：

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

#### 定义列组和行组样式 ####

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

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

#### 表格样式的层叠顺序 ####

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

##### 边框覆盖的规则和顺序 #####

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

参考资料：[https://books.google.com/books?id=v2KIDwAAQBAJ&pg=PT447&lpg=PT447&dq=colgroup+样式优先级&source=bl&ots=L7nW52sIei&sig=ACfU3U2FspYHITnjbY0\_v2czdtKFoFsu2A&hl=zh-CN&sa=X&ved=2ahUKEwjGroDw5N3iAhXAGDQIHf37COwQ6AEwBnoECAkQAQ\#v=onepage&q&f=true][https_books.google.com_books_id_v2KIDwAAQBAJ_pg_PT447_lpg_PT447_dq_colgroup_source_bl_ots_L7nW52sIei_sig_ACfU3U2FspYHITnjbY0_v2czdtKFoFsu2A_hl_zh-CN_sa_X_ved_2ahUKEwjGroDw5N3iAhXAGDQIHf37COwQ6AEwBnoECAkQAQ_v_onepage_q_f_true]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzI3MDg4MjUz_size_16_color_FFFFFF_t_70]: /images/20220121/6845cfa0b78e4cfbbd00e995ef68d301.png
[border-style_hidden]: /images/20220121/d211108ef7ae41c79a549c4552c746ad.png
[border-style_none]: /images/20220121/a4707940fe7a488ba188beac77ec90f2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzI3MDg4MjUz_size_16_color_FFFFFF_t_70 1]: /images/20220121/7ebfde16c1ee40a6b78458c359ec316e.png
[https_books.google.com_books_id_v2KIDwAAQBAJ_pg_PT447_lpg_PT447_dq_colgroup_source_bl_ots_L7nW52sIei_sig_ACfU3U2FspYHITnjbY0_v2czdtKFoFsu2A_hl_zh-CN_sa_X_ved_2ahUKEwjGroDw5N3iAhXAGDQIHf37COwQ6AEwBnoECAkQAQ_v_onepage_q_f_true]: https://books.google.com/books?id=v2KIDwAAQBAJ&pg=PT447&lpg=PT447&dq=colgroup+%E6%A0%B7%E5%BC%8F%E4%BC%98%E5%85%88%E7%BA%A7&source=bl&ots=L7nW52sIei&sig=ACfU3U2FspYHITnjbY0_v2czdtKFoFsu2A&hl=zh-CN&sa=X&ved=2ahUKEwjGroDw5N3iAhXAGDQIHf37COwQ6AEwBnoECAkQAQ#v=onepage&q&f=true