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

【问题标题】：Style Header Title Based on Column Cell Type基于列单元格类型的样式标题标题
【发布时间】：2013-04-26 19:04:04
【问题描述】：

我有一个表格，里面有 CSS 类 string 和 currency 的单元格。我希望 string 列的标题左对齐，currency 列的标题右对齐。

有没有办法纯粹使用 CSS 来做到这一点？

在下面的代码中，Strings 标头左对齐，Currency 标头右对齐，它应该通过检测该列中的单元格。

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

<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 技巧可以做这样的事情？

【问题讨论】：

列是交替的，意味着它们是字符串、货币、字符串、货币等吗？如果是这样，您可以使用类似：th:nth-child(odd) {text-align:left;} 和 th:nth-child(even) {text-align:right;}
没有必要，没有。我试图避免使用伪选择器，因为我必须支持早期版本的 IE。

标签： css

【解决方案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;
        }

希望这会有所帮助:)

【讨论】：

是的，我想我可以这样做。