find some methods of creating an HTML table, which has a fixed header and scrollable body. Of course, you need to use CSS. It is possible to achieve such a result by setting the position property to “sticky” and specifying 0 as a value of the top property for the <th> element.
- Code Html
<!DOCTYPE html> <html> <head> <title>How to Create a Table with a Fixed Header and Scrollable Body</title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div class="blog"> <div class="tableFixHead"> <table> <thead> <tr> <th>Col 1</th> <th>Col 2</th> </tr> </thead> <tbody> <tr> <td>1.1</td> <td>2.1</td> </tr> <tr> <td>1.2</td> <td>2.2</td> </tr> <tr> <td>1.3</td> <td>2.3</td> </tr> <tr> <td>1.4</td> <td>2.4</td> </tr> <tr> <td>1.5</td> <td>2.5</td> </tr> </tbody> </table> </div> </div> </body> </html> - Code Css
.tableFixHead thead th { position: sticky; top: 0; } table { border-collapse: collapse; width: 100%; } th, td { padding: 8px 16px; border: 1px solid #ccc; } th { background: #eee; }
