2019年5月25日土曜日

Bootstrapでテーブルの左端を固定して横スクロール

次に作る時に時間が掛かりそうなので、Bootstrapでテーブルの左端を固定して横スクロールする方法をメモしておきます。 完成イメージは以下。

年度20002001200220032004200520062007200820092010
データ1AAABBBCCCDDDEEEFFFGGGHHHIIIJJJKKK
データ2ZZZYYYXXXWWWVVVUUUTTTSSSRRRQQQPPP


上記を実現するコードは以下になります。
<style>
.table-fixed th:first-child, td:first-child {
  position: sticky;  position: -webkit-sticky;
  left: 0;
}
.table-fixed tr:nth-of-type(odd) th:first-child {
  background-color: #eee;
}
.table-fixed tr:nth-of-type(odd) td:first-child {
  background-color: #eee;
}
.table-fixed tr:nth-of-type(even) td:first-child {
  background-color: #fff;
}
/*
.text-nowrap { white-space: nowrap !important; }
.table-responsive {
  display: block;  width: 100%;
  overflow-x auto;  --webkit-overflow-scrolling: touch;
}
*/
</style>
<div class='text-nowrap table-responsive'>
  <table class='table table-striped table-hover table-fixed'>
    <tr><th>年度</th><th>2000</th><th>2001</th></tr>
    <tr><td>データ</td><td>AAA</td><td>BBB</td></tr>
  <table>
</div>
まずはtableをdivで囲み、text-nowrapクラスを指定して折りたたみをしないようにした上で、table-responsiveクラスを指定し、スクロール可能にしています。 クラスに対応するCSSはコメントを参照。

次にtable内でカラムを固定します。今回はtable-fixedクラスでその指定をしています。 position: sticky; を指定すると簡単に固定スクロールができます。 最近はこの指定ができるようになったので、ライブラリに頼る必要がなくなりました。 注意点としては、固定して横スクロールしたい時には、left: 0; の指定が必要という点です。 固定して縦スクロールしたい時には top: 0; を指定する必要があります。


あとはCSSの設定をして見栄えをよくするだけです。 今回は最初のカラムだけをCSSで固定していますが、background-color は必ず指定し直す必要があります。 Bootstrapではテーブル内の背景色は、transparent または 透過色で指定しているので、何も指定しないとスクロールした時に透過して文字が被ってしまいます。

私は少し手間取りましたが、display: sticky; のおかげで簡単にはなっています。

0 件のコメント: