Question

我有一张如下表我想将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>

Answer 1

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

只需为text-align:left类

应用#tblTopcontrols td.odd之类的样式

Answer 2

您无法使用CSS应用HTML属性，但是对于左对齐文字的情况，您可以使用CSS3'S :nth-child()：

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

或者如果您需要更好的浏览器兼容性，请使用danip's answer。

Answer 3

尝试使用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以添加一个类。也许你有很多这类桌子......

表格的CSS样式

3 个答案: