忍者ブログ

ひつ(じのひよこが)プログラミングします。
お仕事や趣味で困ったこととか、何度も「あれ?どうだったかしら」と調べたりしたこととか、作ったものとか、こどものこととかを書きます
★前は週末定期更新でしたが今は不定期更新です

2024/11    10« 1  2  3  4  5  6  7  8  9  10  11  12  13  14  15  16  17  18  19  20  21  22  23  24  25  26  27  28  29  30  »12

table の行・列を固定にする

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

コメント

ただいまコメントを受けつけておりません。

table の行・列を固定にする

Excel めいて HTML も行や列を固定したい

HTML の table の行・列を固定化し、スクロールしてもどのセルがどの行・列のもののかを見易いようにしたい、という話が挙がり試してみた。

HTML/CSS のみでは無理?

そのために色々と試行錯誤した結果「列も行も」は 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 のようになる。

PR

コメント

ただいまコメントを受けつけておりません。

ブログ内検索

P R