Question

我想为表格的列对齐创建CSS类。

我可以通过明确定义每个类来实现这一点。这是一个完整的工作示例：

<html>
    <head>
        <style>
            table.s1l td:nth-child(1), table.s2l td:nth-child(2) {
                text-align: left;
            }
            table.s1c td:nth-child(1), table.s2c td:nth-child(2) {
                text-align: center;
            }
            table.s1r td:nth-child(1), table.s2r td:nth-child(2) {
                text-align: right;
            }
            table.s5l td:nth-child(5) {
                text-align: left;
            }

        </style>
    </head>
    <body>
        <table class="s1c s2r">
            <tr>
                <td>center</td>
                <td>right</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>

            </tr>
            <tr>
                <td>3</td>
                <td>4</td>
            </tr>
        </table>
        <table style="text-align: center;" class="s5l">
            <tr>
                <td>center</td>
                <td>center</td>
                <td>center</td>
                <td>center</td>
                <td>column for comments comment (aligned left)</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>Here is a comment</td>
            </tr>
        </table>
    </body>
</html>

在第一个表中，对于每个列，一个类被赋值。在第二个表中，除最后一列外，所有列都居中。因此使用了班级s5l。

所有这些都是维基的一部分，用户可以在其中定义表并为表分配类。因此，它是不可预测的，哪些列是必需的。因此，使用此方法，我不得不为所有可能的列显式定义所有类。

是否有可能隐式创建这些类名而不是为大量潜在列定义类？

我想建议现有的CSS文件，不允许编写脚本，因此只能使用纯CSS。

最后它应该是这样的：

<html>
    <head>
        <style> # However the solution looks like
            table.s[N]l td:nth-child([N]) {
                text-align: left;
            }
            table.s[N]c td:nth-child([N]) {
                text-align: center;
            }
            table.s[N]r td:nth-child([N]) {
                text-align: right;
            }
        </style>
    </head>
    <body>
        <table class="s1c s2r">
            <tr>
                <td>center</td>
                <td>right</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>

            </tr>
            <tr>
                <td>3</td>
                <td>4</td>
            </tr>
        </table>
        <table style="text-align: center;" class="s5l">
            <tr>
                <td>center</td>
                <td>center</td>
                <td>center</td>
                <td>center</td>
                <td>column for comments comment (aligned left)</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>Here is a comment</td>
            </tr>
        </table>
    </body>
</html>

因此，动态创建了类s1c，s2r和s5l。如果在另一个Wikipage上，用户添加一个包含11列的大表，并希望最后一列居中，他只需添加类s11c即可。它可以正常工作。

Answer 1

试试这个：

.tab td:nth-child(1) {
    text-align: left;
}
.tab td:nth-child(2) {
    text-align: center;
}
.tab td:nth-child(3) {
    text-align: right;
}

具有nth-child的CSS类的动态名称

1 个答案: