0

私はテーブルを持っています。最初の列を左に揃え、他の列を右に揃えたいだけです。私は次のスタイルを使用します：

<style>
    table{ width:100%;}
    .1col{ text-align:left;}
    .othercols{width:100px;}
    table>tbody>tr>td, table>tbody>tr>th { text-align:center;} 
</style>

それから私は私のテーブルを持っています：

<table>
    <tr>
        <th class="1col">Category</th>
        <th class="othercols">Some text</th>
        <th class="othercols">Some text</th>
        <th class="othercols">Some text</th>
    </tr>
    <tr >
        <td class="1col">Some text</td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

その結果、私の1colクラスは無視されます。何か案が？

4

4 に答える 4

8

CSSクラスは整数で開始できないため、col1代わりに試してください。

実例： http： //jsfiddle.net/9X7kz/8/

興味のある方は、次の文法をご覧ください。

http://www.w3.org/TR/CSS21/grammar.html#scanner

そして、これは特定のルール仕様です。

http://www.w3.org/TR/CSS21/syndata.html#characters

CSSでは、識別子（要素名、クラス、セレクターのIDを含む）には、文字[a-zA-Z0-9]とISO10646文字U+ 00A0以降、およびハイフン（-）とアンダースコア（ _）; 数字、2つのハイフン、またはハイフンの後に数字を続けることはできません。識別子には、エスケープ文字と任意のISO 10646文字を数値コードとして含めることもできます（次の項目を参照）。たとえば、識別子「B＆W？」「B\＆W \？」と書くことができます または「B\26W\3F」。

于 2012-08-15T06:55:01.767 に答える
1

CSSの降順セレクター（つまり、のように親から選択するもの）は、降順ではないセレクター（、などの庭の品種などtable>tbody>tr>th）よりも具体的です。div.class

一般に、そのレベルの特異性は回避する必要があります。これは、多くの問題を引き起こすためです（現在発生している問題とよく似ています）。

「直接子セレクター」は直接の子孫のみを選択するため、ここでは実際には何の役にも立ちません。aは、からのみth下降でき、aはからのみ下降できることがわかります。tbodythtr

テーブルにクラスを指定し、その要素またはそのクラスの子要素に関連するすべてのスタイルを降順にする必要があります。

また、CSSでは、スタイルシートのさらに下にあるスタイルは、他のいくつかの加重係数にも応じて、上記のスタイルをオーバーライドします（リンクは以下のsteveaxのコメントにあります）。

宣言を優先するには、宣言をさらに下に配置する必要があり.1colます...そして、SiGantengの回答によると、クラス名を数字で始めないでください。

.table{ width:100%;}
.table .othercols{width:100px;}
.table td, .table th { text-align:center;} 
.table .col1{ text-align:left;}
于 2012-08-15T06:55:45.023 に答える
0

に変更1colしacolます。これが実際のライブデモです。これはあなたが欲しいですか？

于 2012-08-15T06:58:55.917 に答える
0

作業コード:

<style>
    table{ width:100%;}
    .col1{ text-align:left;}
    .othercols{width:100px;}
    table>tbody>tr>td, table>tbody>tr>th { text-align:center;} 
</style>

<table>
<tr>
    <th class="col1">Category</th>
    <th class="othercols">Some text</th>
    <th class="othercols">Some text</th>
    <th class="othercols">Some text</th>
</tr>
<tr >
    <td class="col1">Some text</td>
    <td></td>
    <td></td>
    <td></td>
</tr>

于 2012-08-15T08:55:11.693 に答える