在colgroup中使用text-align center

我在我的页面中有一个表,我使用colgroups以相同的方式格式化此列中的所有单元格,适用于背景颜色和所有.但似乎无法弄清楚为什么文本对齐中心不起作用.它没有将文本对齐居中.

例:

    
    
    
    

    

        
 
        
20
        
19
        
18
    
    

        

            
 
            
 
            
 
            
 
        
    

CSS:

#names {
    width: 200px;
}

#myTable .datacol {
    text-align: center;
    background-color: red;
}

mercator.. 110

只有一组有限的CSS属性适用于列,而text-align不是其中之一.

请参阅"为什么只有四个属性适用于表列的谜",以了解为什么会出现这种情况.

在您的简单示例中,最简单的解决方法是添加以下规则:

#myTable tbody td { text-align: center }
#myTable tbody td:first-child { text-align: left }

这将使所有表格单元格居中,第一列除外.这在IE6中text-align 不起作用,但在IE6中,实际上(错误地)在列上工作.我不知道IE6是支持所有属性,还是只支持更大的子集.

哦,你的HTML无效.错过了.

只有一组有限的CSS属性适用于列,而text-align不是其中之一.

请参阅"为什么只有四个属性适用于表列的谜",以了解为什么会出现这种情况.

在您的简单示例中,最简单的解决方法是添加以下规则:

#myTable tbody td { text-align: center }
#myTable tbody td:first-child { text-align: left }

这将使所有表格单元格居中,第一列除外.这在IE6中text-align 不起作用,但在IE6中,实际上(错误地)在列上工作.我不知道IE6是支持所有属性,还是只支持更大的子集.

哦,你的HTML无效.错过了.

看到类似的问题:为什么不允许样式表列？

您只能设置边框,背景,宽度和可见性属性,因为单元格不是列的直接后代,而是行的直接后代.

有一些解决方案.最简单的方法是为列中的每个单元格添加一个类.不幸的是,这意味着更多的HTML,但如果您从数据库等生成表,则不应该成为问题.

现代浏览器的另一种解决方案(即不是IE6)是使用一些伪类.tr > td:first-child将连续选择第一个单元格.Opera,Safari,Chrome和Firefox 3.5也支持:nth-child(n)选择器,因此您可以定位特定列.

您也可以使用td+td从第二列开始选择(它实际上意味着"选择左侧td有一个td元素的所有元素.)td+td+td从第三列中选择 - 您可以继续这种方式,覆盖属性.老实说,它不是很好码.