On the page there is a table on the whole screen, I want to make it so that when the table was scrolling, the header reached the top of the screen and was fixed. How to do it? The cap is in the tags <thead></thead>

  • Hello! Here, of course, you need your code, namely: the HTML code of the table itself, with the necessary styles (CSS). As long as I give you a fair minus, as I add the code, I will remove the minus. Good luck to you! - Alexander Kazakov
  • one
    @AlexandrKazakov does not need a code here, it’s about the same for all HTML tables, the author indicated that the heading in thead is enough, well, and CSS simply doesn’t help with this issue - andreymal
  • @andreymal Hello! Are you sure of your words? Now here is one answer with three pluses, and here, there, and HTML, and CSS. Although your CSS is not needed at all. So, if a single answer contains both HTML and CSS, and the author of the answer was not too lazy to write it. Then what prevents the author of the question from doing the same and writing his own code? Andreymal can not give you a minus comment, but then I’ll just say. I put a minus to you, I disagree with you. All you andreymal good! - Alexander Kazakov
  • @AlexandrKazakov I never said that HTML and CSS are not needed in the answer. They are not needed only in the question. - andreymal
  • @AlexandrKazakov “what prevents the author of the question from doing the same and writing his own code?” - prevents the absence of any meaning in it. If you do not know what the code of the tables looks like, read any HTML tutorial and don’t minus people in vain :) - andreymal

1 answer 1

 * { padding: 0; margin: 0; box-sizing: border-box; } .table-fixed-head { width: 100%; table-layout: fixed; border-collapse: collapse; height: 100vh; } .table-fixed-head th, .table-fixed-head td { padding: 5px; text-align: center; width: 33.333vw; } .table-fixed-head thead { background-color: #333; color: #FDFDFD; } .table-fixed-head thead tr { display: block; position: relative; } .table-fixed-head tbody { display: block; overflow: auto; width: 100%; height: calc(100vh - 30px); } .table-fixed-head tbody tr:nth-child(even) { background-color: #DDD; } 
 <table class="table-fixed-head"> <thead> <tr> <th>Title 1</th> <th>Title 2</th> <th>Title 3</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </tbody> </table>

  • um ... what happens here, due to what is achieved such an effect? - mymedia