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

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

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

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

CSS

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

解決済

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

yh04
yh04

総合スコア2

Laravel

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

CSS

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

1回答

0リアクション

0クリップ

194閲覧

投稿2022/08/14 07:12

編集2022/08/14 07:14

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

環境
・Laravel9
・google chrome

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

php(test.blade.php)

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>上下連動スクロール</title> <link rel="stylesheet" href="{{ asset('css/index.css') }}"> </head> <body> <table border="2"> <tr> <th>項目 / データ</th> @for ($i = 0; $i < 20; $i++) <th>項目{{ $i + 1 }}</th> @endfor </tr> @for ($j = 0; $j < 30; $j++) <tr> <td>データ{{ $j + 1 }}</td> @for ($k = 0; $k < 20; $k++) <td>データ{{ $j + 1 }}_{{ $k + 1 }}</td> @endfor </tr> @endfor </table> </body> </html>

css(index.css)

table { display: block; overflow-x: scroll; white-space: nowrap; -webkit-overflow-scrolling: touch; } th { width:100px; min-width:100px; position: sticky; top: 0; left: 0; } td { width:100px; min-width:100px; }

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

yh04

2022/08/14 09:19

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

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Laravel

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

CSS

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