テーブル幅を固定したい

HTML&CSS

テーブルを固定したい場合の例です。
まだ完璧ではありませんが・・・

aaaa bb cccc dddd eeeee
vvvvvvvvvvv ww xxxx yyyy zzzzzzzzzzzzzzzzzzzz
<table>
  <tr>
    <th>aaaa</th>
    <th>bb</th>
    <th>cccc</th>
    <th>dddd</th>
    <th class="fixed">eeeee</th>
  </tr>
  <tr>
    <td>vvvvvvvvvvv</td>
    <td>ww</td>
    <td>xxxx</td>
    <td>yyyy</td>
    <td>zzzzzzzzzzzzzzzzzzzz</td>
  </tr>
</table>

 

table {
  table-layout: fixed;
	word-wrap: break-word;
	width:300px;
}
table,th,td {
  border: 1px solid #bbb;

}

.fixed {
 width:100px;
}

テーブル幅は300px

固定したセルeeeee幅100px

table-layout: fixedでテーブル幅は固定できた。

word-wrap: break-word;で半角英文字がセルを突き抜ける問題はなくなった。

スポンサーリンク

お勧め書籍

AI関連

Python

JavaScript

HTML CSS関連

統計学

HTML&CSS
スポンサーリンク
dororoをフォローする
IT工房|AI入門とWeb開発
タイトルとURLをコピーしました