HTMLでテーブルを表示させようとしています。

質問

HTMLでテーブルを表示させようとしています。

画像のような勤務状況がわかるテーブルをHTMLで表示させようとしています。

テーブルの数字項目は時刻を表しています。(9から18まであります)
ブラウザの横スクロールは表示させたくないので
テーブル内の一部項目(「No.」から「氏名」まで)を固定にして
横スクロールバーを表示させたいのです。

縦スクロールのサンプルを見つけ、
これを横に対応させればよいかと思ったのですが
うまく表示させることが出来ませんでした。

一部項目を固定にして横スクロールバーを表示することは可能なのでしょうか？

回答No.2

naokita · ベストアンサー

スクロールしたいのは、黄色の部分とその上のタイムテーブルだけですよね？

それなら、その部分のテーブルを新規で作らなければいけません。
NO.1の回答は、その旨です。

ですから、
今ある全体のテーブルの該当部分のセルを削除し、
既存のテーブルと新規テーブルの横行を一致させる為に、
今あるテーブルのセルに新規テーブルを入れるスペースを確保する必要があります。
つまり、
１つのテーブルの中に
div overflow:autoで囲ったもう１つのテーブルを入れると言う事です。

上手く行や列を合わせて入れる事が出来たら、widthでお好みに微調整しましょう。

お礼

タイムテーブル部分だけスクロールバーを表示することが出来ました。

ご回答ありがとうございました。

回答No.1

naokita

可能。 200pxは単なる例。スクロールをさせたいセルに設置。

<td>
<div style="width:200px; overflow:auto; margin:0; padding:0;">
　ここに時刻表のテーブル～～を新規で設置
</div>
</td>

お礼

ご回答ありがとうございます。

「ここに時刻表のテーブル～～を新規で設置」
とありますが、
スクロールをつけたくない部分である
項目「No.」からデータ「OOO」までを一つのテーブルとして
<td>
<div style="width:200px; overflow:auto; margin:0; padding:0;">
より上に記述し、
時刻表の部分(項目とデータ両方)を一つのテーブルとして作成するということでしょうか？