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...
精彩评论