views:

367

answers:

2

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?

A: 

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

Eoin Campbell
How useless without browser information, I'm sorry. Yes, it's FF, I added it to the question.
mark
A: 

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;  
}
AlexH
Very insightful answer, thanks!
mark