17. HTML - CSS - width 要素の幅を指定

 
17.1 概要
17.2 指定
17.3 100% と auto の違い

17.1 概要

 まぁ、わかりやすいキーワードなんで何ものかは分からない人もいないでしょうが。  詳細は「width - CSS: カスケーディングスタイルシート | MDN」を読んでいただくとして・・・。

17.2 指定

 参考サイトに指定の方法が説明されています。

width: 300px;				←	設定値を表記
width: 25em;

width: 75%;					←	パーセンテージで表記

width: 25em border-box;		←	キーワードと設定値で表記
width: 75% content-box;
width: max-content;
width: min-content;
width: available;
width: fit-content;
width: auto;

width: inherit;				←	グローバル値を表記
width: initial;
width: unset;

17.3 100% と auto の違い

 実は 100% を使用していてうまくいかなかったことがあって。  「【CSS】width:”auto”とwidth:”100%”の違い」が検索にかかって「はっ」と気づいたのです(ごめんなさい、細かく読んでいません。タイトルでなんか納得したので)。  「百聞は一見に如かず」見比べてみたいと思います。

<table style="width: 100%; padding-left: 2em; padding-right: 2em;">
<tr style="border: 2px solid red;">
<td style="border: 2px solid blue; width: 20%;">あいうえお</td>
<td style="border: 2px solid blue; width: 100%;">かきくけこ</td>
<td style="border: 2px solid blue; width: 20%;">さ</td>
</tr>
</table>
 と書いて、左右を等幅にしたつもりが・・・。文字数というか実際の大きさに左右されてしまった。
あいうえおかきくけこ
 これは、中央の 100% 指定が間違っていたようで

<table style="width: 100%; padding-left: 2em; padding-right: 2em;">
<tr style="border: 2px solid red;">
<td style="border: 2px solid blue; width: 20%;">あいうえお</td>
<td style="border: 2px solid blue; width: auto;">かきくけこ</td>
<td style="border: 2px solid blue; width: 20%;">さ</td>
</tr>
</table>
 と書くことで意図通りの見た目が得られました。
あいうえおかきくけこ