【備忘録】表を横や縦にスクロールし、改行もされるようにする

前の表を練習する記事である程度のことはできるようになったのだが、スクロールを伴う表に関してはうまくできなかった。なのでここでは、「スクロールできる表」の作成に関しての備忘録を書いていく。参考にしたのは以下の記事だ。ありがたい。

前回の表練習記事はこちら：

【備忘録】表の練習です

表には様々なつくりかたがる。5年もウェブ関係に携わってきて未だに不明瞭な部分もあるので、実際に表を作って学んでいこうと思う。 この記事で分かること Advanced Editor Tools(TinyMCE Advanced）の使い方が分か...

sorezorelife.com

2023.05.30

横のみスクロール

▼完成形はこんな感じ（横のみスクロール１）

あああああああああああああああああああ

▼完成形はこんな感じ（横のみスクロール２：左をヘッダーセルに）

▼完成形はこんな感じ（横のみスクロール２：上をヘッダーセルに）

▼完成形はこんな感じ（左上のみを固定した）

▼完成形はこんな感じ（左上のみを固定し、ヘッダーは固定される）

横と縦でスクロール

▼完成形はこんな感じ（横と縦でスクロール）

▼行と列を固定する

▼一番左上を固定する

▼通常の表と比較する（スクロールしない）

これは通常の表である。

横スクロールのみと改行のやり方

CSSを記入（横スクロールのみ）

.table-yoko-scroll {
overflow-x: scroll;

}
.table-yoko-scroll table {
table-layout: fixed;
}

記述したのはこれ。「overflow-xは横に動くよ」という意味。

横スクロールにすると、スマホ表示で表の下の幅が広すぎたので以下のcssで調整した。今後も調整が必要だろう。

@media screen and (max-width: 480px){
.table-yoko-scroll {
margin-bottom:.5em;
}

htmlにclassを挿入（横スクロールのみ）

⑴まずは、通常のやり方で表を作成する。

⑵その後、html編集にして全体を<div class=”table-yoko-scroll”>~~</div>で囲う。

⑶そのまま<table style=”width: px;”>の値をpxにする。最初のサンプルは８００pxだ。通常ここは％で記入されるがpxにするのがミソ。

⑷そのまま<th style=”width: px;”>の値を合算して⑶で決めた値にするようにする。最初のサンプルは2列あるので、100pxと700pxにした。

※本当はpxではなく、％で指定した。だけどこればっかりは仕方ないのかな、と思う。

横と縦のスクロールと改行のやり方

CSSを記入

.table-tate-scroll{
overflow-y: scroll;
height: 200px;
}

「overflow-y: scroll;で縦に動くよ」とする。heightは意外と重要で、縦幅をどこまで表示させるのか、というもの。今後、調整が必要だろう。

@media screen and (max-width: 480px){
.table-tate-scroll{
height: 200px;
margin-bottom:.8em;
}}

PCでの表示とスマホ表示では縦幅に大きな違いが生まれるわけだから、こちらでもheightを指定。また表の下の間が気になったためmarginで調節した。

htmlにclassを挿入（横スクロールのみ）

先ほどの横スクロールのものとほとんど変わらない。変わるのは⑵のみ。

⑴まずは、通常のやり方で表を作成する。

⑵その後、html編集にして全体を<div class=”table-yoko-scroll table-tate-scroll”>~~</div>で囲う。これで、「横にも縦にも動くよ」と指示を与える。

⑶、⑷は先ほどと同じなので省略。

問題点１，PC表示では縦スクロールしない

理由は謎。今後直していきたいがひとまず保留だ。