Shahin
Shahin

Reputation: 12843

CSS Style for Table

I have a Table like below I wanna to add Left property to odd Columns.

   <table id="tblTopcontrols">
            <tr>
                <td>
                </td>
                <td>
                </td>
                <td>
                </td>
                <td>
                </td>
            </tr>
        </table>

I want to wrtie a Style for this table to adding these properties to this table.

    <table id="tblTopcontrols">
                <tr>
                    <td align=left>
                    </td>
                    <td>
                    </td>
                    <td align=left>
                    </td>
                    <td>
                    </td>
                </tr>
</table>

Upvotes: 1

Views: 459

Answers (3)

CRice
CRice

Reputation: 12567

Try use a css3 selector such as :nth-child()

http://css-tricks.com/how-nth-child-works/

For example:

#tblTopcontrols td:nth-child(odd)
{
    text-align: left;
}

If you are worried about compatibility, jquery allows css3 style selectors even on browsers which do not directly support css3.

You can then do something like:

//add the css class named "someAlignLeftClass" to all odd td elements of 
// the table with the id 'tblTopcontrols':
$("#tblTopcontrols td:nth-child(odd)").addClass("someAlignLeftClass");

And then declare the class itself in CSS:

.someAlignLeftClass
{
    text-align: left;
}

Sure its useful if you use jquery, but most sites do these days. It saves manually going through each td and editing the html to add a class. Maybe you have a lot of these types of tables...

Upvotes: 3

BoltClock
BoltClock

Reputation: 723408

You can't apply HTML attributes with CSS, but for your case of left-aligning your text, you can either use CSS3'S :nth-child():

#tblTopcontrols td:nth-child(odd) { text-align: left; }

Or if you need better browser compatibility, go with danip's answer.

Upvotes: 5

johnlemon
johnlemon

Reputation: 21449

<table id="tblTopcontrols">
            <tr>
                <td class="odd"></td>
                <td></td>
                <td class="odd"></td>
                <td></td>
            </tr>
</table>

and just apply a style like text-align:left for the #tblTopcontrols td.odd class

Upvotes: 6

Related Questions