【前端】table中使用colgroup应用样式在HTML5文档标准下的问题

近日,在做一个页面的时候,需要对一个表格的某几列添加一些样式,理所当然地想到了一个标签: colgroup。于是乎打算先在w3cschool上DIY下看看效果,结果发现被坑爹了……

 

colgroup样例代码的显示就出问题了

以上的代码我还没有对其修改,结果显而易见,colgroup里的style:color 属性失效了……  同时,就连 align 属性也跪了..

当时的开发需求是需要对N个网页里的表格模板进行样式修改,所以总不见得把每一个模板的table的那些行都手工添加上一个class吧 T_T..

在网上找了下原因,结果在  Table columns  这篇文章里,发现了一些相关的介绍,大致意思是:原先在HTML4的时候确实是可以对colgroup应用样式的,但是到了HTML5里:

“很不幸,W3C声明中,只有一部分的样式属性可以应用到column上(border,background,width和visibility)。例外: IE7 及更低版本”

这份介绍看得我真是菊花甚痛…… 我于是用ie浏览器去测试了一下,结果确实如此:从IE8一直到IE10,都无法显示colgroup的样式,但是到了IE7就瞬间亮瞎……

IE7下colgroup的属性正常应用样式

IE7下colgroup的属性能够正常应用样式..

以上的问题在 w3.org 的wiki上也有提及,确实是目前仅能应用4个样式。

按照语义化来说,使用 colgroup 确实是符合标准的诶,不知道为何目前仍然没有支持。根据 stackoverflow 上面的一个问答,发现竟然已经是5年前的问题了… 有一种可能性是因为table的物理模型上,colgroup以及col是位于第二、第三层,仅高于最底层的table,而tr,td,th等都位于最高层,会覆盖底层的样式?(可是也尝试给colgroup加了id以增加,不过也没有效果)

于是乎,回过头来看自己项目本身的需求,也只是需要修改下字体的对齐方式(居左改为居中),所以兼容性的要求相对也不是很高,决定使用 css 3 的 选择器。所以稍作权衡,就决定用css3选择器 :nth-child(n)

———————————————–

不过实际上,当我看到后台模板编辑里的某个东东的时候… 瞬间就手贱了……

富文本编辑器的text-align

妥妥地偷懒使用富文本编辑器的对齐功能了…… (不过实际上没偷懒多少吧… 还是要一个个跑到模板里去改…… ORZ….

 

徐迅
Dalston
2013年11月25日20:57:53

 

Leave a Reply

Your email address will not be published. Required fields are marked *