声明： web前端学习笔记，欢迎大神指点。联系QQ：1522025433.

有时候我们要单独对表格的某列定义单独的样式，就会很自然的想到 表格的 在<table>标签内使用的 <colgroup>与<col> 标签，对列进行分组。

来看个例子：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>有关列分组，定义css样式无效的问题</title>

<style type="text/css">

    table {

        width: 300px;

        height: 200px;

        border-collapse: collapse;/*合并单元格边框*/

    }

    th,td {

        border: 1px solid red;/*定义单元格边框*/

    }

</style>

</head>

<body>

<table>

<!--对表格的列进行分组，第一个列组 横跨两列。 span为colgroup和col的属性，表示横跨的列数-->

    <colgroup class="colgroup-1"><col span="2" /></colgroup>

<!--第二个列组 横跨一列。/    -->

    <colgroup class="colgroup-2"><col span="" /></colgroup>

    <tbody>

        <tr>

            <th>表头</th>

            <th>表头</th>

            <th>表头</th>

        </tr>

        <tr>

            <td>单元格</td>

            <td>单元格</td>

            <td>单元格</td>

        </tr>

        <tr>

            <td>单元格</td>

            <td>单元格</td>

            <td>单元格</td>

        </tr>

    </tbody>

</table>

</body>

</html>

在上面的例子中我们把表格分为了两个列组，我们看一下，没有给列组定义样式的浏览器效果：

表头是默认居中对齐的。单元格是默认左对齐的！

下面，我们对列组进天剑如下演示样式：

css：

    .colgroup-1 {

        text-align: right;

    }

给列组1  （即：前两列） 定义 文本右对齐；

看一下有没有效果：

很明显，并没有向我们想象的一样右对齐（谷歌，火狐，IE均无效）；

我们在来看一下看宽度有没有效，避免测试受影响，我们先把，表格中的 总宽度去掉（只是在测试宽度时去掉，下面测试背景颜色时会恢复），及修改

    table {

        /*width: 300px;去掉表格宽度*/

        height: 200px;

        border-collapse: collapse;/*合并单元格边框*/

    }

先看一浏览器的效果：

现在我们来给列组1 添加宽度

css修该位置的代码：

    .colgroup-1 {

        width: 150px;

    }

火狐、IE浏览器中的效果（谷歌一点反应没有）：

乍看上去，好像是起作用了，但是经过我的测量发现，发现，列组1的宽度并不是150px，而是300px;看来在火狐浏览器中把列组的每个列的宽度解析成：150px（自我认为而已，猜的）；

此时看来宽度也是没有效果。高度也是一点效果没有（已测试），就附图片了；

我们再来看一下，背景颜色。

    .colgroup-1 {

    background: pink;

    }

浏览器效果：

这次在各大浏览器中的效果都是一样的；都得到了正确的渲染；

通过以上示例可总结为： 在列组上定义样式，text-align 、width、hieght 、等都是无效的，只有背景颜色是有效的；

经过在网上的搜索，发现原因是：

之所以直接在 col 上定义样式无效，是一个老问题了。实际上HTML4定义的col上的align属性在现代浏览器上从来没有得到过良好支持（只有始于CSS时代之前的IE支持），原因很简单，因为此设计在CSS1、2乃至3的机制中都无法实现。

按照CSS的模型，一个元素上的CSS样式值要么来自于匹配了自己的规则，要么来自于匹配了祖先元素的规则然后通过继承获得。所以一个cell（td/th）的text-align，要么来自于匹配td/th的规则，要么来自于tr,tbody,table等祖先元素。而col/colgroup不可能是其祖先元素。

因此尽管这个需求被开发者要求了十多年，但是始终未能满足。最终还是需要通过更新CSS规范，创造新的combinator和伪类来实现。

下面谈你这个需求：

一、table元素应该用于真的表格，所谓真的表格即二维数据表。从你的需求来看，其实并不像是真的数据表。因此不建议用table元素。

二、其实你可以使用 nth-child 来实现你要的效果。

针对以上问题的解决方法：

但是方法我们可以利用css3中的伪类选择符（E：nth-child(n)或E：nth-of-type(n)）实现想要的效果。（具体属性介绍详见css3参考手册   进入）
我们可以用如下css样式，实现前两列文本右对齐，和背景颜色的修改：
/*代表意思为 选中 父级元素tr下的 第一个 th，第二个th，第一个td，第二个td*/

    th:nth-of-type(1) , th:nth-of-type(2) , td:nth-of-type(1) , td:nth-of-type(2) {

        text-align: right;

        background: green;

    }

各大浏览器的效果图：

此种方法不止可以用于文本对齐，背景颜色，基本上所有的css属性，都可以得到很好的体现（但是表格的单元格td不支持margin属性，利用cellspacing属性可以代替使用时必须确定单元格之间相互独立即不能定义border-collapse:collapse;，但css定义了border-spacing，能够分离单元格的间隙，取值包括一个值或两个值，当定义一个值时，则定义单元格行间距和列间距都为该值，建议使用css来定义；但cellpading可以完全用padding属性代替，来定义单元格的补白）。详情可查阅css88的css3产考手册；

最后总结：

“colgroup”和“col”这两个标签存在严重的浏览器兼容问题，在Chrome、FireFox、Safari等浏览器中都只支持背景色、宽度等少数几种样式属性，所以建议最好不要使用。可以用文章中提到的css3伪类选择符的方法实现，想要的的效果。

有关列分组，定义css样式无效的问题的更多相关文章

  1. 【JavaFx教程】第四部分：CSS 样式

    第4部分主题 CSS样式表 添加应用程序图标 CSS样式表 在JavaFX中,你能使用层叠样式表修饰你的用户接口.这非常好!自定义Java应用界面从来不是件简单的事情. 在本教程中,我们将创建一个*D ...

  2. CSS 样式的使用方式、选择器

    在html中使用css的三种方式: 1.行内样式:同过元素的style属性来设置 <p style="font-size:20px; color:red">hello& ...

  3. JS操作CSS样式

    一.样式表(css) 使用样式表可以更好的显示WEB文档,也可以结合javascript从而实现很好的控制样式表. 样式(css)与内容(html): HTML是处理文档结构的,HTML可以实现如何把 ...

  4. WEB入门三 CSS样式表基础

    学习内容 Ø        CSS的基本语法 Ø        CSS选择器 Ø        常见的CSS样式 Ø        网页中3种使用CSS的方式 能力目标 Ø        理解CSS的 ...

  5. 使用CSS样式的三种方法

    一.内联样式 内联样式通过style属性来设置,属性值可以任意的CSS样式. 1 <!DOCTYPE html> 2 <html lang="en"> 3 ...

  6. 【经验】在CSS中定义超链接样式a:link、a:visited、a:hover、a:active的顺序

    以前用CSS一直没有遇到过这个问题,在最近给一个本科同学做的项目里面.出现一些问题,搜索引擎查了一些网站和资料,发现很多人问到这个问题,给出的结果我试了试,大部分都不正确. 给出我试的顺序,可能会对大 ...

  7. 样式的操作-访问外部定义的css样式

    JS对css的控制力非常强,甚至可以控制外部定义的css样式 ———————————————————————— <style>            .myclass{           ...

  8. CSS样式定义的优先级顺序总结

    CSS样式定义的优先级顺序总结 层叠优先级是: 浏览器缺省 < 外部样式表 < 内部样式表 < 内联样式 其中样式表又有: 类选择器 < 类派生选择器 < ID选择器 & ...

  9. wordpress后台编辑如何显示定义的`style.css`样式

    wordpress后台编辑如何显示定义的style.css样式 由于公司官网采用wordpress进行搭建,但是却又自己设计页面,无奈主题只能自行构建了,直接修改wordpress自带的主题进行修改. ...

随机推荐

  1. LVM基本概念及工作原理

    LVM基本概念及工作原理 背景知识: 一直困惑于LVM,特地找资料查了查,终于对LVM的概念和工作原理有了深入的理解.接下来记录下.新的技术出来必定是为了改变现有的不足,所以LVM的出现是由于对现有磁 ...

  2. Premiere导入视频之后音频轨没有内容

    我用手机录的视频,在导入premiere新建序列之后呢并没有声音啊,音频轨没有内容.去贴吧里面问啊什么的都不靠谱,热心回答的人也不多.想学到东西,在这个年代如果你不愿意掏钱的话就只能靠一个办法:搜索. ...

  3. 数据结构（六）查找---多路查找树（B树）

    B 树 B树与B+树 一:定义 B树(B-树)是一种平衡的多路查找树.-3树和2--4树都是B树的特例.节点最大的孩子数组称为B树的阶(order),因此,-3树是3阶B树,--4树是4阶B树. 二: ...

  4. 学习windows编程 day4 之 矩形的操作

    LRESULT CALLBACK WndProc(HWND hwnd, UINT message, WPARAM wParam, LPARAM lParam) { HDC hdc; PAINTSTRU ...

  5. 一张非常强大的OSI七层模型图解。。。

    源自http://www.colasoft.com.cn/download/protocols_map.php,非常适合小白入门,后面罗列出来方便大家浏览记忆...(不经意间看到的,分享一下) OSI ...

  6. Java编程思想 学习笔记9

    九.接口 接口和内部类为我们提供了一种将接口与实现分离的更加结构化的方法. 1.抽象类和抽象方法  抽象类是普通的类与接口之间的一种中庸之道.创建抽象类是希望通过这个通用接口操纵一系列类. Java提 ...

  7. QPushButton按钮

    需要 from PyQt5.QtWidgets import QPushButton继承 QAbstractButton 创建按钮控件:QPushButton() 创建一个无父控件的按钮控件QPush ...

  8. python技巧 列表推导

    val = [expression for value in collection if condition] 等价于 val = []for value in collection:    if c ...

  9. SpringBoot PUT请求

    (1)配置HiddenHttpMethodFilter(SpringMVC需要配置,SpringBoot已经为我们自动配置了) (2)在视图页面创建一个Post Form表单,在表单中创建一个inpu ...

  10. 【Python】Python-基础语法学习

    基础语法学习 果然学完 C++ 后再看其他语言的确有很多的共性,只需要熟悉一下python的独特语法和 C++ 中的差异就可以写出一些小的程序,而写得过程中也再次体会出python代码的精简和灵活: ...