横スクロールさせたいtableの幅がうまくいかない…を解消しよう
花粉症が今年はクッソ辛いyanagimachiです。
「スギ花粉症の根本治癒を目的とした次世代型ワクチン」が臨床試験に入るニュースを見たので、実用化されたらとりあえずスギの花粉症だけでも早めにどうにかしたいところです。
さて、先日PCでtableが横スクロールする案件がありました。
とはいえ、サイトの幅が広いとかモジュール化によって中身が足りないtableだってあるわけで、そういう時はなんかうまく幅の指定が動かない時があります。
今までスマホの時は幅が狭かったり、中身が多かったりで大丈夫だったのに、PCだとうまくいかない時のTIPをご紹介します。
HTMLは以下のようなものとします。
<div class="mod-tbl">
<table>
//中身
</table>
</div><!-- /.mod-tbl -->
いままでの実装
tableを囲む.mod-tblに
- スクロールの
overflow: auto; - 中身がどのサイズ以上だったらスクロールするかの
max-width: 700px;（レスポンシブ用。PCのみならwidth: 700px;でも）
.mod-tbl {
max-width: 700px;
overflow: auto;
}
tableに
- th,tdの幅を固定にさせる
table-layout: fixed; - 最低幅
min-width: 100%;
table {
table-layout: fixed;
min-width: 100%;
}
を指定し、th,tdにも以下のように幅を指定しました。
tbody th {
width: 200px;
}
td {
width: 130px;
}
この場合は以下のようになります。
tdの数が少ない場合は幅がそれなりに整ってそうで良さそうなのですが、多い場合は場所によってまちまちです。
それになぜか横スクロールが出ていません。
TIPS
th,tdにmin-widthでwidthと同じ幅を指定してあげるだけです。
tbody th {
width: 200px;
min-width: 200px;
}
td {
width: 130px;
min-width: 130px;
}
今回は指定した幅がきちんと表示に反映できました。
こういったtableを作ったことがなかったので、先日初遭遇でした。
table奥深いですね。
