CODEWITHSUNDEEP
csshtml-tablepadding
mark
mark

Reputation: 6559

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?

Upvotes: 5

Views: 6916

Answers (3)

amain
amain

Reputation: 1688

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

Upvotes: 4

johntrepreneur
johntrepreneur

Reputation: 4704

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

Upvotes: 0

Eoin Campbell
Eoin Campbell

Reputation: 44308

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

Upvotes: 0

Related Questions