<table class="sticky_table"> <thead> <tr> <th class="blank"> </th> <th>head</th> <th>head</th> <!-- ... --> </tr> <!-- ... --> </thead> <tbody> <tr> <th>left</th> <td>data</td> <td>data</td> <!-- ... --> </tr> <!-- ... --> </tbody> </table> HTMLはシンプルなテーブルの記述です。 ヘッダ固定テーブルを実装するために以下を行います。 tableタグにsticky_tableクラスを付与する。 theadのtrの1列目(固定列と固定行の交差部分)にblankクラスを付与する。
![CSSのみで行・列ヘッダ固定テーブルを実装(Firefox / Chrome / Safari) - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/a0b0f80fc24492975a6d5aede8b056669c1254b0/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9Q1NTJUUzJTgxJUFFJUUzJTgxJUJGJUUzJTgxJUE3JUU4JUExJThDJUUzJTgzJUJCJUU1JTg4JTk3JUUzJTgzJTk4JUUzJTgzJTgzJUUzJTgzJTgwJUU1JTlCJUJBJUU1JUFFJTlBJUUzJTgzJTg2JUUzJTgzJUJDJUUzJTgzJTk2JUUzJTgzJUFCJUUzJTgyJTkyJUU1JUFFJTlGJUU4JUEzJTg1JUVGJUJDJTg4RmlyZWZveCUyMCUyRiUyMENocm9tZSUyMCUyRiUyMFNhZmFyaSVFRiVCQyU4OSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZWE2M2IxNWUyZDNmYTJjN2Q4NzU4NTZhOWIwY2QyMWQ%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwczB0dGVyJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz01ODE0ZmFhNDJkYmI5OGRmMmVlNTkyNDc5OGRmNzE4Ng%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D31d6ccf681696341b330884b60d12564)