テーブルフォーマットの構造に合わせて幅を設定する方法は？

Question

私はテーブル構造のHTMLに取り組んでいます。私は自分のデザインで自分のデザインを設定したいと思っています！ ボディの内容に合わせてテーブルの幅が設定されています。

私の質問はどのようにヘッダに幅accrdingを設定できますか？ ここに私のコードです。 enter image description here

Answer 1

がtheadにtdまたはthタグのいずれかにstyleを設定し、それが内のすべてのセルに適用されます：

<table> 
 
    <thead> 
 
    <tr> 
 
     <td>Document name</td> 
 
     <td>Category</td> 
 
     <td>Sub category</td> 
 
     <td>Status</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Indisoft – RX Office and Thinagee- 401K Payment </td> 
 
     <td>admin</td> 
 
     <td>admin-sub</td> 
 
     <td>published</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

あなたは私の出力を見ることができますカラム。

以下の例では、インラインスタイルを使用しましたが、これは必須ではありません。 CSSクラスを使用することもできます。

また、のtheadをth個の要素に置き換える必要があります。

table td { 
 
    border: 1px black solid; 
 
}

<table> 
 
<thead> 
 
    <tr> 
 
     <td style="width: 50px">Document name</td> 
 
     <td>Category</td> 
 
     <td>Sub category</td> 
 
     <td>Status</td> 
 
    </tr> 
 
</thead> 
 
<tbody> 
 
    <tr> 
 
     <td>Indisoft – RX Office and Thinagee- 401K Payment </td> 
 
     <td>admin</td> 
 
     <td>admin-sub</td> 
 
     <td>published</td> 
 
    </tr> 
 
</tbody>

Answer 2

あなたは、各列のスタイルの幅を設定する必要があり、他のケースでは、体の大きさにリサイズします。例えば

：

table { 
 
border: solid 1px #000; 
 
} 
 
table td:nth-child(1) { 
 
    width: 200px; 
 
    border-right: solid 1px #ccc; 
 
} 
 
table td:nth-child(2) { 
 
    width: 100px; 
 
    border-right: solid 1px #ccc; 
 
} 
 
table td:nth-child(3) { 
 
    width: 150px; 
 
    border-right: solid 1px #ccc; 
 
} 
 
table td:nth-child(2) { 
 
    width: 50px; 
 
}

<table> 
 
<thead> 
 
    <tr> 
 
     <td>Document name</td> 
 
     <td>Category</td> 
 
     <td>Sub category</td> 
 
     <td>Status</td> 
 
    </tr> 
 
</thead> 
 
<tbody> 
 
    <tr> 
 
     <td>Indisoft – RX Office and Thinagee- 401K Payment </td> 
 
     <td>admin</td> 
 
     <td>admin-sub</td> 
 
     <td>published</td> 
 
    </tr> 
 
</tbody>