修复了表 header 无法正常工作并将 header 堆叠在一起的问题

Question

All of the header elements of my table are stacked on top of one another when the <table> 's position is fixed.

How can I fix this issue so that all the table header elements will be aligned properly with column property?

Note. I do not want to use sticky and only looking of a solution with Fixed

 table { /* border: 5px solid red; */ display: flex; flex-flow: column; width: 100%; } thead { flex: 0 0 auto; } tbody { flex: 1 1 auto; display: block; overflow-y: auto; overflow-x: hidden; } th { text-align: left; position: fixed; } tr { width: 100%; display: table; table-layout: fixed; }

 <table> <thead> <tr> <th>Account No.</th> <th>Date</th> <th>Transaction Details</th> <th>Value date</th> <th>details</th> <th>Deposit AMT</th> <th>Note</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>10-10-2023</td> <td>ALJDFLDOI 4584</td> <td>10-10-2023</td> <td>This is test data:This is test data;This is test data !</td> <td>test</td> <td>test</td> </tr> <tr> <td>1</td> <td>10-10-2023</td> <td>ALJDFLDOI 4584</td> <td>10-10-2023</td> <td>This is test data !This is test data !This is test data !</td> <td>test</td> <td>test</td> </tr> <tr> <td>1</td> <td>10-10-2023</td> <td>ALJDFLDOI 4584</td> <td>10-10-2023</td> <td>This is test data !This is test data !This is test data !</td> <td>test</td> <td>test</td> </tr> <tr> <td>1</td> <td>10-10-2023</td> <td>ALJDFLDOI 4584</td> <td>10-10-2023</td> <td>This is test data !This is test data !This is test data !</td> <td>test</td> <td>test</td> </tr> </tbody> </table> <div style="height: 2000px;"></div>

Answer 1

1. I have changed display of table to block which will help the table to be aligned horizontally center.

2. I have given position: sticky; top: 0 position: sticky; top: 0 to thead tr which will make it stick to top when scrolled.

3. I have given min-width: 100px; to th, td which will set the minimum width of each cell and will make sure that the width of the cells of the header matches the width of the cells of the body.

Last, I have removed flex-flow: column;, display: table; and table-layout: fixed; flex-flow: column;, display: table; and table-layout: fixed; as they are not required. I have set overflow-y: auto; and overflow-x: hidden; overflow-y: auto; and overflow-x: hidden; on tbody element to make the body scrollable if the content is overflowing.

 table { /* border: 5px solid red; */ display: block; width: 100%; } thead tr { position: sticky; top: 0; } tbody { overflow-y: auto; overflow-x: hidden; } th, td { min-width: 100px; text-align: left; }

 <.--The content below is only a placeholder and can be replaced.--> <table> <thead> <tr> <th>Account No:</th> <th>Date</th> <th>Transaction Details</th> <th>Value date</th> <th>details</th> <th>Deposit AMT</th> <th>Note</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>10-10-2023</td> <td>ALJDFLDOI 4584</td> <td>10-10-2023</td> <td>This is test data;This is test data !This is test data !</td> <td>test</td> <td>test</td> </tr> <tr> <td>1</td> <td>10-10-2023</td> <td>ALJDFLDOI 4584</td> <td>10-10-2023</td> <td>This is test data !This is test data !This is test data !</td> <td>test</td> <td>test</td> </tr> <tr> <td>1</td> <td>10-10-2023</td> <td>ALJDFLDOI 4584</td> <td>10-10-2023</td> <td>This is test data !This is test data !This is test data !</td> <td>test</td> <td>test</td> </tr> <tr> <td>1</td> <td>10-10-2023</td> <td>ALJDFLDOI 4584</td> <td>10-10-2023</td> <td>This is test data !This is test data !This is test data !</td> <td>test</td> <td>test</td> </tr> </tbody> </table> <div style="height: 2000px;"></div>