[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
ただいまコメントを受けつけておりません。
HTML の table の行・列を固定化し、スクロールしてもどのセルがどの行・列のもののかを見易いようにしたい、という話が挙がり試してみた。
そのために色々と試行錯誤した結果「列も行も」は HTML/CSS だけでは難しそうだと考えた。実のところ「列だけ」はやれそうだし、やっている方もいらっしゃった ( two fixed columns, horizontal scroll - JSFiddle とか)。行だけはもう少し難度が下がる。しかし、行も列もとなると少なくとも私にはできなかったのである。
ただ、ちょっと js を書いたらできた。 https://shunshun94.github.io/shared/jquery/io/github/shunshun94/table/tableSample.html こんな感じである。
jQuery と JS のライブラリを1つ読み込めばできるようにしてみた。以下のようにして使う。
<table id="columnFixedTable" border="1"> <thead><!-- 略 --></thead> <tbody><!-- 略 --></tbody> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="https://shunshun94.github.io/shared/jquery/io/github/shunshun94/table/fixedTable.js"></script> <script> new io.github.shunshun94.table.FixedTable({}, $('#columnFixedTable')); </script>
動作サンプルは https://shunshun94.github.io/shared/jquery/io/github/shunshun94/table/tableSample2.html にある
第一引数に色々入れることで挙動を変えられる。
new io.github.shunshun94.table.FixedTable({ colColumns:3, // 列をいくつ固定するのかを指定する。指定しなければ1 width: 500, // 表の表示領域の横幅。指定しなければその table が可能な範囲で最大の横幅となる bodyHeight: 200 // 表の固定されない領域の縦幅。指定しなければ tbody の高さとなる }, $('#columnFixedTable'));
この場合の挙動は https://shunshun94.github.io/shared/jquery/io/github/shunshun94/table/tableSample2.html?colColumns=3&width=500&bodyHeight=200 のようになる。
ただいまコメントを受けつけておりません。