mark mark - 2 months ago 7
CSS Question

How to apply padding to a column using <col> and CSS in Firefox?

Example:

<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>


The color is applied to the column but not the padding. If I use classes/ids on cells directly, it works.

Am I forced to use them, or is there a way taking advantage of the
<col>
tag?

Answer

It's not supposed to work, at least with CSS 2.1. You may have a look the the CSS 2.1 table columns specification.

You can circumvent this by using :first-child and +:

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