0

CSS クラスstringおよびcurrencyのセルで満たされたテーブルがあります。文字列列のヘッダーを左揃えにし、通貨列のヘッダーを右揃えにします。

純粋にCSSでこれを行う方法はありますか?

次のコードでは、Stringsヘッダーが左揃えになり、Currencyヘッダーが右揃えになります。その列のセルのクラス タイプを検出することで、これを認識する必要があります。

注: 1 つの列 (ヘッダーの下) 内のすべてのセルは、同じクラス タイプを共有します。混同はありません。

<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 トリックはありますか?

4

1 に答える 1

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;
        }

これが役立つことを願っています:)

于 2013-05-02T14:56:47.800 に答える