声明： 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. jackson的自动检测机制

    jackson允许使用任意的构造方法或工厂方法来构造实例 使用@JsonAutoDetect(作用在类上)来开启/禁止自动检测 fieldVisibility:字段的可见级别 ANY:任何级别的字段都 ...

  2. Python XML操作

    XML(可扩展性标记语言)是一种非常常用的文件类型,主要用于存储和传输数据.在编程中,对XML的操作也非常常见. 本文根据python库文档中的xml.etree.ElementTree类来进行介绍X ...

  3. Java基础编程题——打印九九乘法表

    package com.yangzl.basic; /** * 九九乘法表 * @author Administrator * */ public class Nine_Nine_Multiplica ...

  4. asp.net 使用一般处理程序和ajax post实现登录以及记住密码

    1.登录页面login.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeBehind=&qu ...

  5. 第三周结对项目--小学生四则运算CAI软件汇报及总结（UI/web）

    前言: 这周是和我队友苏卫喜一起结对开发,我主要是写项目文档需求分析,她是通过我的需求文档来进行做思维导图,之后我们通过思维导图一起讨论用户界面设计. 以下就是我的需求分析1.0版本 1.   软件名 ...

  6. E - tower HYSBZ - 4657 （网络流割点）

    题目链接:https://cn.vjudge.net/contest/281959#problem/E 题目大意:中文题目 具体思路:首先,有矛盾的时候就是两个导弹的运动轨迹会相交的时候,那么我们可以 ...

  7. python标准库 - 数学库和随机数库

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 我们已经在Python运算中看到Python最基本的数学运算功能.此外,math包 ...

  8. python - 自定制property/property的延时计算

    自定制prooerty: #模拟@property 实现将类的函数属性变成类属性: #定义描述符 class msf(): def __init__(self,obj): self.obj = obj ...

  9. Maven聚合工程的使用

    创建一个service模块 接下来,在该项目中创建一个接口 创建一个实现类,并实现接口 在sm1234-web项目中,调用service的方法,需要在该项目的pom.xml中引入依赖Service模块 ...

  10. 在imagenet预训模型上进行finetune

    所谓fine tune就是用别人训练好的模型,加上我们自己的数据,来训练新的模型.fine tune相当于使用别人的模型的前几层,来提取浅层特征,然后在最后再落入我们自己的分类中. fine tune ...