css - 如何在 Firefox 中使用 <col> 和 CSS 将填充应用于列？

Question

例子:

<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>标签？

Answer 1

它不应该工作，至少在 CSS 2.1 中是这样。你可以看看 CSS 2.1 table columns specification .

您可以使用 :first-child 和 + 来规避此问题:

/* 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;  
}