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}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/08/14 12:19
2022/08/14 12:27
2022/08/14 12:54