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

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

年度	2000	2001	2002	2003	2004	2005	2006	2007	2008	2009	2010
データ1	AAA	BBB	CCC	DDD	EEE	FFF	GGG	HHH	III	JJJ	KKK
データ2	ZZZ	YYY	XXX	WWW	VVV	UUU	TTT	SSS	RRR	QQQ	PPP

上記を実現するコードは以下になります。

<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; のおかげで簡単にはなっています。