注文に応じてテーブルの列幅を設定します

Question

私のタイムゾーンでは午後の午後が良いです。

私はtrの4つのテーブルを持ち、それぞれtrは4つのtdを持っています。

それぞれのtdに異なる幅を適用したいと思います。 は、たとえば、私は次のことをしたい：

<tr> 
    <td width="20%"/> 
    <td width="25%"/> 
    <td width="10%"/> 
    <td width="45%"/> 
</tr> 

trに適用され、そのクラス内で、私は、各tdに幅を与えているだけで1つのクラスを持ってする方法はありますか？あるいは、それぞれ幅の異なる4つのクラスを作成しますか？何かのように

.firstTD{ 
    width:20%; 
} 
.secondTD{ 
    width:25%; 
} 
.thirdTD{ 
    width:10%; 
} 
.fourTD{ 
    width:45%; 
} 

これはInternet Explorer 6でもサポートされています。

ありがとうございます。 よろしくお願いします。

Answer 1

唯一の方法は、各TDのCSSクラスを作成することです。いずれにしても、TDのclass属性は最初の行にのみ使用され、後続の属性はwidthの値を継承します。

Answer 2

それぞれのtdを異なる幅にするには、異なるクラスを作成する必要があります。 trに幅を設定することはできますが、セルを同じ部分に分割するか、データを保持するのに十分な大きさに分割します。

Answer 3

あなたは、隣接セレクタを使用することができます：あなたはどのクラスを必要としないということのよう

.mytable td{ 
    width:20%; 
} 
.mytable td+td{ 
    width:25%; 
} 
.mytable td+td+td{ 
    width:10%; 
} 
.mytable td+td+td+td{ 
    width:45%; 
} 

を、私は明らかに、これらのスタイルを継承するテーブル自体1、またはすべてのテーブルを与えるだろう。

Answer 4

あなたは、テーブル（またはTBODY）に適用される単一のクラスを使用して

.yourclass td { /* first td */ } 
.yourclass td + td { /* 2nd td */ } 
.yourclass td + td + td{ /* 3rd td */ } 
.yourclass td + td + td + td { /* 4th td */ } 

はこのように書かれたルールは、以下のすべてのルールに適用されるので、これだけを使用されることを考慮して使用することができます特定のプロパティを設定および上書きする古いIEのバージョンをsupprtする必要がない場合

あなたもnth-child は、たとえば使用することができます

.yourclass tr td:nth-child(2) { /* 2nd td */ } 

注：クラスは必須ではありませんが、あなたが複数のテーブルを持っている場合、このスタイルは、唯一の要素に影響を与えますあなたはこのようにスタイルをしたい。

Answer 5

複数のクラスを使用する場合は、が必要です。 adjacent selectorが対象です。

td { width: 20%; } 
td + td { width: 25%; } 
td + td + td { width: 10%; } 
td + td + td + td { width: 45%; } 

Answer 6

あなたがTRと使用中のクラスを定義し使用することができます。次のように提供することができる別個の幅をそれぞれTDに

<tr class="myrow"> 
    <td /> 
    <td /> 
    <td /> 
    <td /> 
</tr> 

CSSを与えるために第n-子（N）セレクタ、

.myrow td:nth-child(1){ 
    width:20%; 
} 
.myrow td:nth-child(2){ 
    width:25%; 
} 
.myrow td:nth-child(3){ 
    width:10%; 
} 
.myrow td:nth-child(4){ 
    width:45%; 
} 

しかし、これはCSS3をサポートするブラウザでも機能します。これはIE9以降でサポートされます。