声明： 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. loadrunner java ssh

    s D:\TestCase\20170703_docker_rongqiyun\tc_docker_ssh_docker_push\Actions.java /* * LoadRunner Java ...

  2. Hbase记录-HBase扫描/计数/权限

    HBase扫描   scan 命令用于查看HTable数据.使用 scan 命令可以得到表中的数据.它的语法如下: scan ‘<table name>’ 下面的示例演示了如何使用scan ...

  3. 史上最全 40 道 Dubbo 面试题及答案

    https://blog.csdn.net/zl1zl2zl3/article/details/83721147

  4. 用 Lua 控制 MIDI 合成器来播放自定义格式乐谱

    用 Lua 控制 MIDI 合成器来播放自定义格式乐谱 作者: FreeBlues 最新: https://www.cnblogs.com/freeblues/p/9936844.html 说明: 本 ...

  5. C# Winform中慎用Application.DoEvents

    private void Add() { ; i < ; i++) { Button button = new Button(); button.Width = ; button.Height ...

  6. Spring第一个helloWorld

    Spring 简介: 轻量级:Spring是非侵入性的-基于Spring开发的应用中的对象可以不依赖于Spring的API 依赖注入(DI—dependdency injection.IOC) 面向切 ...

  7. 字体QFont

    import sys from PyQt5.QtWidgets import QApplication, QWidget,QLabel from PyQt5.QtGui import QFont fr ...

  8. json转对象-对象转json

    我们经常会用到json,所以在c#里就会经常有对象or对象数组转json,json转对象or对象数组. ps:对象或者json可能是{}or[],也就是json属性or json数组形式,或者json ...

  9. A - 最大子矩阵 HYSBZ - 1084 （DP）

    题目链接:https://cn.vjudge.net/contest/281963#problem/A 题目大意:中文题目 具体思路:观察到m<=2,所以我们可以对两种情况进行单独讨论,当m== ...

  10. win10如何获得管理员权限_百度经验

    win10如何获得管理员权限_百度经验http://jingyan.baidu.com/article/0aa223755448db88cd0d6450.html 在右下方任务栏的“搜索web和win ...