横スクロールさせたいtableの幅がうまくいかない…を解消しよう | バシャログ。
花粉症が今年はクッソ辛いyanagimachiです。 「スギ花粉症の根本治癒を目的とした次世代型ワクチン」が臨床試験に入るニュースを見たので、実用化されたらとりあえずスギの花粉症だけでも早めにどうにかしたいところです。 さて、先日PCでtableが横スクロールする案件がありました。 とはいえ、サイトの幅が広いとかモジュール化によって中身が足りないtableだってあるわけで、そういう時はなんかうまく幅の指定が動かない時があります。 今までスマホの時は幅が狭かったり、中身が多かったりで大丈夫だったのに、PCだとうまくいかない時のTIPをご紹介します。 HTMLは以下のようなものとします。 <div class="mod-tbl"> <table> //中身 </table> </div><!-- /.mod-tbl --> いままでの実装 tableを囲む.mod-tblに スクロールのove
ヘッダを固定してスクロールする方法 | CSS解説
対象とするテーブルではヘッダ部をthead要素内に記述し、ボディ部と分離しておきます。 <table> <thead> <tr> <th>A</th> <th>B</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>1</td> </tr> </tbody> </table> theadとtbodyをブロック要素とし、tbodyのoverflowをscrollとします。 <style type="text/css"> thead, tbody { display: block; } tbody { overflow-x: hidden; overflow-y: scroll; height: 100px; } </style> このoverflowをautoとした場合、Internet ExplorerやFirefoxではスクロールバーが右端のセ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
