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

StackOverflow https://stackoverflow.com/questions/868009

  •  22-08-2019
  •  | 
  •  

Question

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?

Was it helpful?

Solution

It's not supposed to work, at least with CSS 2.1. You may have a look at 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;  
}

OTHER TIPS

This works for me in IE with the following DOCTYPE

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

and the styles 

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

What doctype are you using... and what browser are you using...

hmm... just checked doesn't seem to work in Firefox

Alex's answer works for me, except it's not very scalable for lots of columns and quickly becomes hard to read. I ended up using :nth-of-type(n) instead, however this selector was introduced in CSS3.

Selector: :nth-of-type(n)
Example: p:nth-of-type(2)
Result: Selects every <p> element that is the second <p> element of its parent

Example:

/*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;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top