ホームページのネタ帳

tableの幅を固定する方法

2012年5月11日

tableの幅をwidthで指定しても、上手く幅指定が出来ていない場合があります。
そんな場合の対処法をご紹介します。

<table class="test">  
 <tr>  
   <th width="100">テキストが入ります。</th>  
   <td width="200">テキストが入ります。</td>  
   <td width="150">テキストが入ります。</td>  
 </tr>  
 <tr>
   <th>テキストが入ります。</th>  
   <td>テキストが入ります。</td>  
   <td>テキストが入ります。</td>  
 </tr> 
</table>
.test {  
  border-collapse: collapse;  
}  
.test th,  
.test td {  
  border: 1px solid #000000;  
  padding: 5px 10px;  
  table-layout: fixed;  
  text-align: left;  
}  
.test th {  
  background-color: #CCCCCC;  
}

table-layoutfixedを指定することで、tableの幅を自由に設定し固定することができます。



投稿タグ関連記事


カテゴリー関連記事

お問い合わせはこちら

ご質問などございましたら、お気軽にご連絡ください。

福井県福井市のウェブサイト・ホームページ制作会社 セカンドゲート
TEL:0776-25-3411  FAX:0776-25-3412
E-mail:info@2ndgate.jp