テーブルのヘッダを固定して中身をスクロールさせたいって事、めちゃくちゃあると思います。 当然既にいろんな対策が練られています。 方法としては、大きく分けてCSSのみで実装する方法と、JQueryでプラグインなどを用いて実装する方法があります。 (参考:http://webnonotes.com/css/table-header/) しかし、CSSだけで実装する方法では、幅を固定しなければいけないというデメリットがあります。 でも… CSSだけで幅可変のヘッダ固定テーブル、作りたくない? と思ったのでやってみました。 解決法 結論から言うと、calc()とpaddingを利用します。 まずはテーブルを用意。 <table class="table-header-fixed"> <thead> <tr> <th>#</th><th>ヘッダ2</th><th>ヘッダ3</th> </tr> </
![CSSのみで幅可変のヘッダ固定テーブルを実装 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/de8d48b51f7657ef35b614beacd4f2b06285e60b/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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9Q1NTJUUzJTgxJUFFJUUzJTgxJUJGJUUzJTgxJUE3JUU1JUI5JTg1JUU1JThGJUFGJUU1JUE0JTg5JUUzJTgxJUFFJUUzJTgzJTk4JUUzJTgzJTgzJUUzJTgzJTgwJUU1JTlCJUJBJUU1JUFFJTlBJUUzJTgzJTg2JUUzJTgzJUJDJUUzJTgzJTk2JUUzJTgzJUFCJUUzJTgyJTkyJUU1JUFFJTlGJUU4JUEzJTg1JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz00MWNjY2NmZDUxM2VkMmY1YzBhYjBiOWIxYjU4ZWY1OA%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwazdhJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz00ZDZkZjQ3MGIxOGI2ZTNlMTAzNTM2Yzk0ODA2ZjY0Mg%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D1d4e633622d2c4f8aee515902ae552af)