Home >Web Front-end >CSS Tutorial >How to Create a Fixed Header and Fixed First Column Table Using Only CSS?
In an effort to display data in an organized manner, you're aiming to create an HTML table that features both a fixed header and a fixed first column. Yet, your exploration has uncovered a range of solutions that depend on JavaScript or jQuery, introducing potential drawbacks on mobile browsers due to less-than-ideal scrolling behavior. Hence, your pursuit now centers on finding a pure CSS solution.
Fortunately, the position: sticky property, supported in modern versions of Chrome, Firefox, and Edge, offers a way to achieve the desired behavior. You can combine it with overflow: scroll property to create a dynamic table with fixed header and column elements.
HTML Markup:
<div class="container"> <table> <thead> <tr> <th></th> <th>headheadhead</th> <th>headheadhead</th> <th>headheadhead</th> <th>headheadhead</th> <th>headheadhead</th> <th>headheadhead</th> <th>headheadhead</th> </tr> </thead> <tbody> <tr> <th>head</th> <td>body</td> <td>body</td> <td>body</td> <td>body</td> <td>body</td> <td>body</td> <td>body</td> </tr> <tr> <th>head</th> <td>body</td> <td>body</td> <td>body</td> <td>body</td> <td>body</td> <td>body</td> <td>body</td> </tr> <tr> <th>head</th> <td>body</td> <td>body</td> <td>body</td> <td>body</td> <td>body</td> <td>body</td> <td>body</td> </tr> <tr> <th>head</th> <td>body</td> <td>body</td> <td>body</td> <td>body</td> <td>body</td> <td>body</td> <td>body</td> </tr> <tr> <th>head</th> <td>body</td> <td>body</td> <td>body</td> <td>body</td> <td>body</td> <td>body</td> <td>body</td> </tr> <tr> <th>head</th> <td>body</td> <td>body</td> <td>body</td> <td>body</td> <td>body</td> <td>body</td> <td>body</td> </tr> </tbody> </table> </div>
CSS:
div { max-width: 400px; max-height: 150px; overflow: scroll; } thead th { position: -webkit-sticky; /* for Safari */ position: sticky; top: 0; } tbody th { position: -webkit-sticky; /* for Safari */ position: sticky; left: 0; } thead th:first-child { left: 0; z-index: 2; } thead th { background: #000; color: #FFF; z-index: 1; } tbody th { background: #FFF; border-right: 1px solid #CCC; box-shadow: 1px 0 0 0 #ccc; } table { border-collapse: collapse; } td, th { padding: 0.5em; }
This implementation allows you to scroll both vertically and horizontally while keeping the header and first column in place, providing an improved user experience for viewing tabular data.
The above is the detailed content of How to Create a Fixed Header and Fixed First Column Table Using Only CSS?. For more information, please follow other related articles on the PHP Chinese website!