CSSテーブルの列のカップルが

Question

に等しい私は、ページ内のテーブルを持っており、各行は、次のコードのように2つのずつの要素あります私は何をしたいか

<tr> 
    <th></th> 
    <td></td> 
    <th></th> 
    <td></td> 
</tr> 

は、ヘッダおよびセルの各ペアを持っていますテーブル全体の幅の50％の幅を持つことができますが、固定幅を使用することはできません。 これに関する提案はありますか？

Answer 1

trは「テーブル行」を表します。したがって、4th/trの分割を50％幅の2つの異なる行に分割する場合は、2つの別個のテーブル行trを作成する必要があります。

セルの内容に関係なく、セルを50％に維持するには、table-layout:fixed;をテーブルに適用します。

table { 
 
width:100%; 
 
table-layout:fixed; 
 
} 
 
th, td { 
 
    border:1px solid #000; 
 
}

<table> 
 
    <tr> 
 
     <th>hello one hello one hello one hello one hello one hello one hello one hello one</th> 
 
     <td>hello two</td> 
 
     <th>hello one hello one hello one hello one hello one hello one hello one hello one</th> 
 
     <td>hello four</td> 
 
    </tr> 
 
</table> 
 
<br><br> 
 
<table> 
 
    <tr> 
 
     <th>hello one hello one hello one hello one hello one hello one hello one hello one</th> 
 
     <td>hello two</td> 
 
    </tr> 
 
    <tr> 
 
    <th>hello three hello three hello three hello three hello three hello three hello three hello three</th> 
 
    <td>hello four</td> 
 
    </tr> 
 
</table>