5

例子：

<style type="text/css">
    table {
        border: 1px solid red;
        border-collapse: collapse;
        text-align: left;
    }
    #col-1 {
        padding-left: 20px;
        background-color: tan;
    }
    #specific-cell {
        padding-left: 20px;
    }
</style>
<table>
    <col id="col-1">
    <col id="col-2">
    <tr>
        <th>foo</th>
        <th>bar</th>
    </tr>
    <tr>
        <td>data1</th>
        <td>data2</th>
    </tr>
    <tr>
        <td id="specific-cell">data1</th>
        <td>data2</th>
    </tr>
    <tr>
        <td>data1</th>
        <td>data2</th>
    </tr>
</table>

颜色应用于列，但不应用于填充。如果我直接在单元格上使用类/ID，它就可以工作。

我是被迫使用它们，还是有办法利用<col>标签？

4

3 回答 3

4

它不应该工作，至少在 CSS 2.1 中是这样。您可以查看CSS 2.1 表格列规范。

您可以使用:first-childand来规避这种情况+：

/* first column */
td:first-child {
    padding-left: 20px;  
}

/* second column */ 
td:first-child + td {
    padding-left: 10px;  
}

/* third columns */ {
td:first-child + td + td {
    padding-left: 0;  
}
于 2009-05-15T11:55:51.167 回答
0

这适用于我在 IE 中使用以下 DOCTYPE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

和风格

#col-1 {
    padding-left: 50px;
    background-color: tan;
}
#col-2 {
    padding-left: 100px;
    background-color: lightgreen;
}

您使用的是什么文档类型...以及您使用的是什么浏览器...

嗯...刚刚检查似乎在 Firefox 中不起作用

于 2009-05-15T10:58:43.287 回答
0

亚历克斯的答案对我有用，除了它对于很多列的可扩展性不高，而且很快变得难以阅读。我最终:nth-of-type(n)改用了，但是这个选择器是在 CSS3 中引入的。

选择器： :nth-of-type(n)
示例： p:nth-of-type(2)
结果：选择作为其父元素<p>的第二个元素的每个元素<p>

例子：

/*column 1*/
#myTable td:nth-of-type(1)
{
    padding-left: 20px;
    background-color: tan;
}
/*column 2*/
#myTable td:nth-of-type(2)
{
    padding-left: 10px;
}
于 2013-11-12T20:17:26.040 回答