开发者

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>


<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


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.


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...

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜