Question

我的表格中填充了CSS类字符串和货币的单元格。我希望字符串列的标题保持对齐，并且货币列的标题要正确对齐。

有没有办法纯粹使用CSS？

在下面的代码中，字符串标题将保持对齐，货币标题将右对齐，并且它应该通过检测类的类型来了解该列中的单元格。

注意：单个列（标题下）中的所有单元格将共享相同的类类型。没有混合和匹配。

<table>
    <thead>
        <tr>
            <th>Strings</th>
            <th>Currency</th>
        </tr>
    </thead>
    <tr>
        <td class="string">This is a string.</td>
        <td class="currency">100.00</td>
    </tr>
</table>

我的想法是这样的：

table td.string thead th { // if cells in column are of string type
    text-align:left;
}

table td.currency thead th { // if cells in column are of currency type
    text-align:right;
}

我知道上面的CSS不起作用，但有一些CSS技巧会做这样的事情吗？

Answer 1

基于给定的音符

Note: All cells in a single column (under the header) will share the same class type. There is no mixing and matching.

您可以在html和css中尝试此更改以实现此目的。

HTML：

<table>
        <thead>
            <tr>
                <th class="string">
                    Strings
                </th>
                <th>
                    Currency
                </th>
            </tr>
        </thead>
        <tr class="currency">
            <td class="string">
                This is a string.
            </td>
            <td class="currency">
                100.00
            </td>
        </tr>
    </table>

的CSS：

 .string 
        {
            text-align: left;
        }

        .currency
        {
            text-align: right;
        }

希望这会有所帮助：）

基于列单元格类型的样式标题标题

1 个答案: