I have been exploring various resources to create an HTML table with a fixed first column using CSS only. Despite my efforts, the fixed column is consistently appearing lower than the rest of the content, and I'm unsure why.
Check out the code I've written in this JSFiddle link. Can you help me identify what I might be doing wrong?
Things I've tried so far include:
- Adjusting cell size, margin, padding, and border settings
- Replacing
position: absolutewithfloat: left - Moving the scrolling behavior to a different element
- Adding or removing content within the table
margin-top: -16px;didn't resolve the problem as the distance varies based on cell height
.table
{
border-collapse:collapse;
border: 1px solid grey;
display: table;
}
.tr
{
display: table-row;
}
.th
{
display: table-cell;
border:1px solid grey;
white-space:nowrap;
font-weight: bold;
}
.td
{
display: table-cell;
border:1px solid grey;
white-space:nowrap;
margin:0;
}
.wrapper
{
overflow-x:scroll;
margin-left:100px;
overflow-y:visible;
}
.wrapper-outer
{
position: relative;
width: 300px;
}
.fixed {
position:absolute;
width:100px;
left:0;
top:auto;
} <div class=wrapper-outer>
<div class="wrapper">
<div class="table">
...
</div>
</div>
</div>