There is an example table on the codepen https://codepen.io/geeny273/pen/vMvmLm?editors=1000 . The columns in the header and in the main part of the table do not match due to scrolling. How to make them match?

<html> <div> <div> <table border="" style="width: 100%"> <thead> <tr> <th style="width: 10%"> Name <th style="width: 20%"> Surname <th style="width: 20%"> Age <tr> </thead> </table> </div> <div style="height: 100px; overflow: auto;"> <table border="" style="width: 100%"> <tbody> <tr> <td style="width: 10%">name1 <td style="width: 20%">sname1 <td style="width: 20%">age1 </tr> <tr> <td>name2 <td>sname2 <td>age2 </tr> <tr> <td>name3 <td>sname3 <td>age3 </tr> <tr> <td>name4 <td>sname5 <td>age5 </tr> <tr> <td>name5 <td>sname6 <td>age6 </tr> <tr> <td>name7 <td>sname7 <td>age7 </tr> <tr> <td>name8 <td>sname8 <td>age8 </tr> </tbody> </table> </div> </div> </html>

    2 answers 2

      table { border-collapse: collapse; border-bottom: 1px solid #ddd; } thead { background-color: #333; color: #fff; } thead,tbody { display: block; } th,td { padding: 8px 10px; border: 1px solid #ddd; width: 117px; box-sizing: border-box; } tbody { height: 160px; overflow-y: scroll } 
      <table class="example-table"> <thead> <tr> <th> Header 1 </th> <th> Header 2 </th> <th> Header 3 </th> <th> Header 4 </th> </tr> </thead> <tbody> <tr> <td> Row 1- Col 1 </td> <td> Row 1- Col 2 </td> <td> Row 1- Col 3 </td> <td> Row 1- Col 4 </td> </tr> <tr> <td> Row 2- Col 1 </td> <td> Row 2- Col 2 </td> <td> Row 2- Col 3 </td> <td> Row 2- Col 4 </td> </tr> <tr> <td> Row 3- Col 1 </td> <td> Row 3- Col 2 </td> <td> Row 3- Col 3 </td> <td> Row 3- Col 4 </td> </tr> <tr> <td> Row 4- Col 1 </td> <td> Row 4- Col 2 </td> <td> Row 4- Col 3 </td> <td> Row 4- Col 4 </td> </tr> <tr> <td> Row 5- Col 1 </td> <td> Row 5- Col 2 </td> <td> Row 5- Col 3 </td> <td> Row 5- Col 4 </td> </tr> <tr> <td> Row 6- Col 1 </td> <td> Row 6- Col 2 </td> <td> Row 6- Col 3 </td> <td> Row 6- Col 4 </td> </tr> <tr> <td> Row 7- Col 1 </td> <td> Row 7- Col 2 </td> <td> Row 7- Col 3 </td> <td> Row 7- Col 4 </td> </tr> <tr> <td> Row 8- Col 1 </td> <td> Row 8- Col 2 </td> <td> Row 8- Col 3 </td> <td> Row 8- Col 4 </td> </tr> <tr> <td> Row 9- Col 1 </td> <td> Row 9- Col 2 </td> <td> Row 9- Col 3 </td> <td> Row 9- Col 4 </td> </tr> <tr> <td> Row 10- Col 1 </td> <td> Row 10- Col 2 </td> <td> Row 10- Col 3 </td> <td> Row 10- Col 4 </td> </tr> <tr> <td> Row 11- Col 1 </td> <td> Row 11- Col 2 </td> <td> Row 11- Col 3 </td> <td> Row 11- Col 4 </td> </tr> <tr> <td> Row 12- Col 1 </td> <td> Row 12- Col 2 </td> <td> Row 12- Col 3 </td> <td> Row 12- Col 4 </td> </tr> <tr> <td> Row 13- Col 1 </td> <td> Row 13- Col 2 </td> <td> Row 13- Col 3 </td> <td> Row 13- Col 4 </td> </tr> <tr> <td> Row 14- Col 1 </td> <td> Row 14- Col 2 </td> <td> Row 14- Col 3 </td> <td> Row 14- Col 4 </td> </tr> <tr> <td> Row 15- Col 1 </td> <td> Row 15- Col 2 </td> <td> Row 15- Col 3 </td> <td> Row 15- Col 4 </td> </tr> <tr> <td> Row 16- Col 1 </td> <td> Row 16- Col 2 </td> <td> Row 16- Col 3 </td> <td> Row 16- Col 4 </td> </tr> </tbody> </table>

    • Is it possible for this example to add a scroll for table body? - fetchenko
    • @Fedchenko Edited the code - Denis Heavenly
    • Thanks, as one of the solutions is possible. Is it a good practice to replace the tbody and thead properties with a display block? - fetchenko
    • @Fedchenko, I don’t see anything bad about it - Denis of Heaven

     <html> <div> <div> </div> <div style="height: 100px; overflow: auto;"> <table border="" style="width: 100%"> <thead> <tr> <th style="width: 10%"> Name <th style="width: 20%"> Surname <th style="width: 20%"> Age <tr> </thead> <tbody> <tr> <td style="width: 10%">name1 <td style="width: 20%">sname1 <td style="width: 20%">age1 </tr> <tr> <td>name2 <td>sname2 <td>age2 </tr> <tr> <td>name3 <td>sname3 <td>age3 </tr> <tr> <td>name4 <td>sname5 <td>age5 </tr> <tr> <td>name5 <td>sname6 <td>age6 </tr> <tr> <td>name7 <td>sname7 <td>age7 </tr> <tr> <td>name8 <td>sname8 <td>age8 </tr> </tbody> </table> </div> </div> </html>

    Why did thead carry in a separate unit?

    • In order to fix the height of the main content and add a scroll for it. This is the only solution I have found so far. Because the css display: table-row-group property that applies to tbody - does not respond to the width css property, height - fetchenko