table内thとtdに高さ制限を設け、スクロールバーを表示させる平成30年 9月 17日 作成
概略
table内thとtdにcssにて高さ設定（height:値;）をしても文字数が多いと勝手に高さを調整してしまう。（高くなってしまう。）
設定した高さ以上になると、スクロールバーを表示させる仕様にしたい。
手段
<th>と<td>内に内包するdivタグを作り対応する。
実装方法
HTML
<table> <tr> <th>アイテム 1</th> <td><div class="inside">さんぷるてきすと<br />サンプルテキスト<br />さんぷるてきすと<br />サンプルテキストさんぷるてきすと<br />サンプルテキスト</div></td> </tr> <tr> <th>アイテム 2</th> <td><div class="inside">さんぷるてきすと<br />サンプルテキスト</div></td> </tr> </table>
CSS
table {
border: 0.1rem solid #C3C3C3;
}
table th {
font-size: 1.2rem;
padding: 0.5rem;
border: 0.1rem solid #C3C3C3;
}
table td {
font-size: 1.2rem;
width: 15rem;
/* 高さの指定 */
height: 8rem;
padding: 0.5rem;
border: 0.1rem solid #C3C3C3;
}
table td .inside {
height: 100%;
/* スクロールバー表示 */
overflow: auto;
}
デモ
考察
ポイントはtdの高さ「height: 値;」指定をして、内包divの高さ「height: 100%」、「overflow: auto;」にする事。
最後までお読み下さり ありがとうございました。記事はここ迄です。
尚、本記事は作成から「5年以上」経過しています。
記事作成当時と現在の状況等により内容が適切でない場合があります。また、リンク切れが生じている場合もあります事を予めご了承下さい。
お気に入りに登録しますとお気に入り記事を一元管理でき、再度閲覧したい場合等 容易に記事を探し出す事ができますのでご活用下さい。
下段にはコメントを掲載しております。
広告バナー
コメント
頂いたコメントを下記に掲載しております。更に下部にはコメント投稿フォームを設けております。
注意事項を確認・了承した上、コメント投稿お願いいたします。
注意事項に該当するコメントにつきましては、事前告知なしに投稿したコメントの削除を行う場合があります。
予めご了承下さい。
- 記事内容と無関係なコメント
- 公序良俗に反するコメント
- 個人情報や法令違反を含むコメント
- その他、管理者が不適切と判断したコメント
現在 頂いているコメントはありません
