ウェブページのコーディングで、スマートフォン用のテーブルのコーディングに関しての質問です。 スマホでの観覧でtableの列と行が多いtableを設定します。
ウェブページのコーディングで、スマートフォン用のテーブルのコーディングに関しての質問です。 スマホでの観覧でtableの列と行が多いtableを設定します。 先頭の項目が追尾して付いてくれるように設定したいです。 http://hananooka.jp/yahoo-chiebukuro/0125/ △ 上記ページが見本になります。 見本のtableで項目01~0８（theadの部分の項目）が上下のスクロールで付いてくるように設定したいです。 position: sticky;を設定しましたが、付いてきてくれません。 スマホ用のテーブルで横にもスクロール出来るようにしたいので、overflow: scroll;を設定しています。 作成するtable条件としては以下３つです。 ・はみ出し部分は横スクロールで見れるようにする ・thead部分を追尾する ・tbodyの１列目のthを横スクロールで追尾する（こちらは出来ています） どのように設定を行えばよろしいでしょうか？ 助けてください。よろしくお願い致します。
HTML、CSS・21閲覧・100
ベストアンサー
tis********さん >････（theadの部分の項目）が上下のスクロールで付いてくるように設定･･････････ 修正、追加部分のみを以下に記載。↓ ･･････････････････ .resultData__area{ width: 100%; box-sizing: border-box; overflow: scroll; position: sticky; top:0; max-height:700px; /* 追加 700px は任意値 */ } table.comparisonTable thead{ position: sticky; top:0; z-index:10; } /* 追加 */ table.comparisonTable{ border-collspace: separate; min-width: 1000px; border: 1px solid #707070; border-top: 2px solid #707070; } ･･････････････････
質問者からのお礼コメント
うおおおお！！ アドバイス通り、出来ました！！！ 本当にありがとうございます！
お礼日時：1/25 17:22
