表の列幅を全て均等にする方法

WEB上で表を作る場合、普通に創れば・・・

品番

販売個数

在庫数

この様な文字数によって列の幅が変わってしまいます・・・

列幅を全て同じ幅にしたい場合はどの様にすればよいのでしょうか・・・


今日はその方法を紹介しますね・・・

1. スタイルシートにtable-layoutを使用します
   
   
2. 列幅を固定したい場合・・・style="table-layout:fixed"
   
   
3. 次に、好きな幅を指定します・・・例えば、200pxと指定すれば
   style="table-layout:fixed;width:200px"
   
   
4. これをTABLEタグの中に記述します・・・
   
   <TABLE style="table-layout:fixed;width:200px">
   <TR>
   <TD align="center">品番</TD>
   <TD align="center">販売個数</TD>
   <TD align="center">在庫数</TD>
   </TR>
   </TABLE>
   
   
   
5. すると、下のように列幅は均等に成りました

   品番

   販売個数

   在庫数

今日の小技は如何でしたか？