Having an issue where my table header is not aligning with my table data correctly, after implementing a vertical scrollbar like so:
.tbody{
height: 250px;
overflow-y: auto;
overflow-x: hidden;
display: block;
}
.table{
width: 100%;
border-collapse: collapse;
display: table;
}
.table_header_row{
display: block;
}
Example of how the web page looks with skewed table headers:
Example of how its supposed to look without the vertical scrollbar:
Anyway to fix such a problem preferably only using css?
A simple way would be by setting your header to absolute position
CSS
.yourTableClass {
position:relative;
overflow:hidden;
}
.yourTableClass thead {
position:absolute; /*order fixed to freeze the header*/
top:0px;
left:0px;
right:0px;
}
HTML:
<table class="yourTableClass">
<thead>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</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>
</tbody>
</table>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.