列元素所用属性之谜

   在table表格元素中,有一个col元素(它还有一个孪生胞兄colgroup元素),在 W3C 标准中,这个元素被称为列元素,用于定义表格中的某些列中的表现形式,在现行及常见的教程中,认为col元素可以使用常见的全局属性,以及align、valign、width等属性(乃至HTML 4.1 及 5.0 规范文档中,也同意该元素可以使用全局属性),很多DEMO也用它来举例说明如何让表格中的某列居中对齐、右对齐或改变某列的文字颜色,而事实上在大家常年的实践中,已经证明了一个很恐怖的事情…align也好valign也罢,甚至连全局属性中的color属性都完全不起作用,这到底是发生了什么事。

  照例先上结论:

  在 CSS 2 中,列元素就仅能使用border、background、width及visibility这四个属性,其它属性(如对齐及字色都无法生效)。

  IE6、IE7及IE8(Q)遵循常见教程,可以使用各种对齐和文字相关设置。

  IE9开始及现在所有常用非IE浏览器均支持:nth-child(n)选择器,可以用该选择器实现列选择,并支持所有全局 CSS 属性。

  IE8(S)无解(因为它不支持上述选择器),除第一条所描述的 4 个 CSS 属性之外,无法统一改变列的对齐及字色。

  而col及colgroup元素,除了对IE6、7、8进行兼容之外,已经没用了。

  为什么,这究竟是为什么……

  从比较简单而明显的角度说,所有元素的属性在未定义的情况下,都是“继承”,也就是与其父元素属性相同。而表格的 HTML 书写方式,是以行为基础的,单元格是行的子元素,但不是列的,所以它继承不到列的属性。

  从更根本的角度说,是 CSS 的工作模式所决定的。页面的一切表现均交由 CSS 进行计算和渲染,而 CSS 的基本工作方式遵循下面的步骤:

  解析样式表和文档

  对于文档中的每个元素:

  决定应用哪个 CSS 规则。

  使用这些规则做出 CSS 级联。

  如果级联的结果是关键字“继承”(或继承的属性没有规定值),则进行继承

  执行计算(把’em’变成’px’等等)。在 CSS 2.1 中,getComputedStyle()DOM方法负责返回这些值。

  此时,每个元素的所有属性都会有一个值。

  排列文档版式

  绘制文档

  在这样的工作顺序下,因为列元素是display:table-column,而单元格元素是display:table-cell,他们之间的具体关系要到第三步才能确认,因为你需要计算某一个单元格横跨几列或几行,才能确定某一个单元格到底是第几列。而在那之前,也就是第二步的时候,每个元素的属性值都已经计算出来了!但你还不知道哪个单元是第几列,所以你没办法知道该列的值。

  然后我做了一个很无聊的DEMO,使用上面说到的 CSS 3 选择器,选择所有偶数列的单元格,变成蓝色;而让所有第三列的单元格变成黄色。然后分别对 n 行 n 列的单元格进行合并操作(也就是第一行的第一个单元格占据3个单元格的,第二行的第二个单元格占据3个单元格,以此类推)。结果如下:

  因为对单元格进行了列合并,而那个选择器的本质又是按照行而非列选择的,结果就变成上面那样了(没能在视觉上垂直渲染某一列)。

  话虽这么说,但在脱离了表格布局那么多年的今天,在表格终于能够回归它本来的应用目的的今天,这种奇葩布局的表格应该也是寥寥无几了。

时间: 2025-01-20 19:35:30

列元素所用属性之谜的相关文章

schema,xsd怎么在同一个complexType定义元素和属性,XML如下

问题描述 schema,xsd怎么在同一个complexType定义元素和属性,XML如下 schema,xsd怎么在同一个complexType定义元素和属性,XML如下

亲密接触XML(7)- 元素 vs. 属性的使用

xml   可以将数据存储在子元素中或属性中.看看下面这些例子:       < person sex="female">    < firstname>Anna< /firstname>    < lastname>Smith< /lastname>    < /person>          < person>    < sex>female< /sex>    <

从零开始学习jQuery(四) 使用jQuery操作元素的属性与样式

一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得大家学习. 二.前言 通过前面几章我们已经能够完全控制jQuery包装集了, 无论是通过选择器选取对象, 或者从包装集中删除,过滤元素. 本章将讲解如何使用jQuery获取和修改元素属性和样式. 三. 区分DOM属性和元素属性 一个img标签: <img src="images/image.1.jpg" id="hibiscus" alt="

XUL教程:为XBL元素定义属性

原文标题:XUL Tutorial - Bindings - Adding Properties 原文作者:Neil Deakin 原文地址:http://www.xulplanet.com/tutorials/xultu/xblprops.html 下面是对原文的翻译: 添加属性(Adding Properties) 在这一节,我们将学习怎样为XBL元素增加自定义属性. XBL接口 通过JavaScript和DOM,可以对元素的属性进行访问.在XBL中,你可以为元素自定义属性,当然也可以为元素

JavaScript获取伪元素(Pseudo-Element)属性的方法技巧

 这篇文章主要介绍了JavaScript获取伪元素(Pseudo-Element)属性的方法技巧,本文直接给出实现代码,需要的朋友可以参考下     CSS伪元素(pseudo-elements)非常的有用--你可以用它制作出CSS三角形,用在提示框上面,还可以用它完成很多简单的任务,而不需要多余的HTML元素.以前,伪元素的CSS属性是无法用JavaScript获取的,但现在,有了一个新的JavaScript方法可以访问它们! 假设你的CSS代码是这样的: 代码如下: .element:bef

javascript-js:通过.parentNode 获得父元素,然后如何获得获得父元素的属性值?

问题描述 js:通过.parentNode 获得父元素,然后如何获得获得父元素的属性值? var imgDiv = document.getElementById(divID); var obj = imgDiv.parentNode; 这样获得imgDiv 的父元素,然后我想继续获得父元素的宽度和高度,求大神指点,谢谢 解决方案 你的obj就是父元素,用obj.width,obj.heigth 解决方案二: 少了style,obj.style.width. 解决方案三: 获取父元素之后,通过o

值-jquery datagrid 改变某列元素,获取后还是以前的元素

问题描述 jquery datagrid 改变某列元素,获取后还是以前的元素 这是列 columns : [ [ { width : '1260', title : '内容', field : 'content', }] ], 这是里面的值 "<p>2.产品质量要求:<input type="text" name="ceshi" onchange="showChange(this)"></p> <

BootStrap Table 获取同行不同列元素的方法_javascript技巧

表格同行中存在元素的相互调用,如何保证元素能够被同行不同列的其他方框使用,方法如下: 页面元素示例如下: <div id="MyTableId" class="content-main-container"> <div class="panel panel-primary gd-panel" id="mywindow"> <div class="panel-heading"&g

原生javascript获取元素样式属性值的方法_javascript技巧

所以, 我们得利用IE的currentStyle和W3C的getPropertyValue获取. elem.style.attr获取样式的方法就不说了. 先来看currentStyle方法, 此对象ie专属, 代表了在全局样式表.内嵌样式和 HTML 标签属性中指定的对象格式和样式. IE下通过它, 就可以获取元素的Css属性值. 而针对其他标准浏览器, W3C也提供了一个方法getPropertyValue, 此方法, 稍有点复杂, 首先要通过document.defaultView.getC