表格的CSS样式 - 编程之家

如何解决表格的CSS样式

| 我有一个像下面的表我想将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的答案。