问题描述
|
我有一个像下面的表
我想将Left属性添加到奇数列。
<table id=\"tblTopcontrols\">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
我想为该表编写样式,以将这些属性添加到该表中。
<table id=\"tblTopcontrols\">
<tr>
<td align=left>
</td>
<td>
</td>
<td align=left>
</td>
<td>
</td>
</tr>
</table>
解决方法
尝试使用css3选择器,例如:nth-child()
http://css-tricks.com/how-nth-child-works/
例如:
#tblTopcontrols td:nth-child(odd)
{
text-align: left;
}
如果您担心兼容性,即使在不直接支持css3的浏览器上,jquery也会允许css3样式选择器。
然后,您可以执行以下操作:
//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\");
然后在CSS中声明类本身:
.someAlignLeftClass
{
text-align: left;
}
如果使用jquery肯定有用,但是如今大多数站点都在使用。它可以手动保存每个td并编辑html以添加类。也许您有很多这类桌子...
,<table id=\"tblTopcontrols\">
<tr>
<td class=\"odd\"></td>
<td></td>
<td class=\"odd\"></td>
<td></td>
</tr>
</table>
并为#tblTopcontrols td.odd
类应用text-align:left
之类的样式
,您无法将CSS属性应用于HTML,但是对于文本左对齐的情况,可以使用CSS3的S8ѭ:
#tblTopcontrols td:nth-child(odd) { text-align: left; }
或者,如果您需要更好的浏览器兼容性,请使用danip的答案。