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;}
0 コメント