How can I create HTML and CSS columns that stick together without manually specifying the "left:" parameter every time?
The current example in the fiddle achieves what I want, but requires manual setting of the "left:" value. Is there a way to make this more dynamic using JavaScript or CSS for varying column widths?
td,
th {
position: sticky;
top: 0;
align-self: flex-start;
left: 0;
background-color: #fff;
z-index:100;
}
.ddd {
position: sticky;
top: 0;
align-self: flex-start;
left: 0;
background-color: #fff;
z-index:101;
}
.dddd {
position: sticky;
top: 0;
align-self: flex-start;
left: 90px;
background-color: #fff;
z-index:101;
}
.ddddd {
position: sticky;
top: 0;
align-self: flex-start;
left: 190px;
background-color: #fff;
z-index:101;
}
<table style="width:2000px" border="1">
<tr>
<th style="width:90px" class="sticky-col">Firstname</th>
<th style="width:100px" class="sticky-to-left-elem">Lastname</th>
<th style="width:140px">Age</th>
<td style="width:40px">Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<!-- Additional table rows removed for brevity -->