applying css to tables

[smsinger3]

Hello. I have a question about applying css to table cells. How can I specify a style for an individual cell in this table in a .css. Keep in mind I can't add a new class, or id to anywhere else in the table. Here's the table:

<table class=MyTable>
<tr>
<td>I want my width 10%</td>
<td>I want my width 50%</td>
<td>I want my width 40%</td>
</tr>
</table>

My guess the css would look something like this:

.MyTable td { width: 10%; }
.MyTable td td { width: 50%; }
.MyTable td td td { width: 40%; }

Am I close to being right? Thank you very much for your help!

 

[cLFlaVA]

why can't you add a class or id?

the above is not correct --

a td following a td means "table cells within this table cell."

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[LTeeple]

I add classes to tds all the time.

I thought that was the beauty of css! Overriding...


Cheers!
Laura

 

[BillyRayPreachersSon]

Given your example:

<table class=MyTable>
    <tr>
        <td>I want my width 10%</td>
        <td>I want my width 50%</td>
        <td>I want my width 40%</td>
    </tr>
</table>

If you wanted to access any specifc cell without using IDs, you might be able to use the " x + y " pattern in your selector:

table.MyTable > tr {
    /* Should match only the first td */
}

table.MyTable > tr + td {
    /* Should match only the second td */
}

table.MyTable > tr + td + td {
    /* Should match only the third td */
}

You can find out more about selectors here:

http://www.w3.org/TR/CSS21/selector.html

Be aware of 3 things:

- Not all browsers support that syntax.

- The above CSS matches the HTML markup as it appears onscreen, but most browsers will insert a tbody element, so you might need to take that into account in your selector (adding something like " > tbody " before the tr.

- The above CSS only takes into account one row. You would have to modify it in a similar manner to access each specific row.

Hope this helps,
Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[BillyRayPreachersSon]

Oops - I knew I had the CSS right first time:

table.MyTable > tr + td {
    /* Should match only the first td */
}

table.MyTable > tr + td + td  {
    /* Should match only the second td */
}

table.MyTable > tr + td + td + td  {
    /* Should match only the third td */
}

)

Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]