質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

481閲覧

tableタグのヘッドと左の列のみを固定したい

yh04

総合スコア2

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2022/08/14 07:12

編集2022/08/14 21:54

tableタグのヘッドと左の列のみを固定したいのですが、「position: sticky;」が機能しません。
なぜか「項目 / データ」の箇所のみが横スクロールで固定されてしまいます。

環境
・Laravel9
・google chrome

原因と解決策を教えていただければ幸いです。

php(test.blade.php)

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>上下連動スクロール</title> 8 <link rel="stylesheet" href="{{ asset('css/index.css') }}"> 9 </head> 10 11 <body> 12 <table border="2"> 13 <tr> 14 <th>項目 / データ</th> 15 @for ($i = 0; $i < 20; $i++) 16 <th>項目{{ $i + 1 }}</th> 17 @endfor 18 </tr> 19 20 @for ($j = 0; $j < 30; $j++) 21 <tr> 22 <td>データ{{ $j + 1 }}</td> 23 24 @for ($k = 0; $k < 20; $k++) 25 <td>データ{{ $j + 1 }}_{{ $k + 1 }}</td> 26 @endfor 27 </tr> 28 @endfor 29 </table> 30 </body> 31</html>

css(index.css)

1table { 2 display: block; 3 overflow-x: scroll; 4 white-space: nowrap; 5 -webkit-overflow-scrolling: touch; 6} 7 8th { 9 width:100px; 10 min-width:100px; 11 position: sticky; 12 top: 0; 13 left: 0; 14} 15 16td { 17 width:100px; 18 min-width:100px; 19}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

下記でどうでしょう。

css

1table { 2 display: block; 3 overflow: scroll; 4 white-space: nowrap; 5 -webkit-overflow-scrolling: touch; 6} 7 8 /* 縦スクロール時にヘッダーを固定する */ 9th { 10 width:100px; 11 min-width:100px; 12 position: sticky; 13 top: 0; 14} 15td { 16 width:100px; 17 min-width:100px; 18} 19 20 /* 横スクロール時に左列を固定する */ 21th:first-child, td:first-child { 22 position: sticky; 23 left: 0; 24} 25 26/* 左上のセルは手前に */ 27th:first-child { 28 z-index: 1; 29}

Codepenのサンプルを作成しましたので、ご確認ください。

Codepenサンプル

投稿2022/08/14 08:25

編集2022/08/14 12:26
hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yh04

2022/08/14 12:19

ご回答いただいき、ありがとうございます! 横スクロールは固定できましたが、縦スクロールが効いていないようです、、、。 試行錯誤しますが、もし原因が分かりましたら、教えていただければ幸いです。
hatena19

2022/08/14 12:27

回答にサンプルを追加しましたので、ご自身のコードとの違いを確認ください。
yh04

2022/08/14 12:54

ありがとうございます! ご参考にさせていただきます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問