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

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




	
	aaaa
	


	
1111 2222 2222
11233 11233 11233
11233 11233 11233

这其中需要注意的点为:

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

定义列组和行组样式

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

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

    表格样式的层叠顺序与优先级_第1张图片
    td元素的样式具有最大优先权。如果单元格为透明(未额外定义样式),那么行(tr元素具有最大优先权)。table定义的背景优先权最低,其他元素都为透明时,才可看到表格背景。

    边框覆盖的规则和顺序
    1. 如果定义了border-style:hidden; 那么它的优先级高于任何其他相冲突的边框。
      表格样式的层叠顺序与优先级_第2张图片
    2. border-style:none;的优先级最低,只有在该边汇集的所有元素的边框属性都是none,该边框才会被省略,不然就会显示出边框。
      .表格样式的层叠顺序与优先级_第3张图片
    3. 更宽的边框将覆盖更窄的边框。(开头的疑惑解释)。
    4. 如果若干边框的border-width属性值相同,那么样式的优先顺序将根据边框样式类型排序,从高到低依次为:double,solid,dashed, dotted, ridge, outset, groove以及inset.
      表格样式的层叠顺序与优先级_第4张图片
    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

    你可能感兴趣的:(css)