I'm trying to create a table with HTML + CSS where the first column should be fixed at 25px on the left when scrolling, but I'm having problems because the second column is showing on the left of the first column.
I created this simple code and could not find a solution.
The html code of the table
<div class="container">
<section class="report-section-main">
<div class="scroll-wrap" style="display: flex;">
<table id="table-manager" class="minus-width">
<tbody>
<tr>
<th class="col-sticky-after-btn border-round-top-left">Fixed Column</th>
<th class="text-center-in-table font-size-12">Column 2</th>
<th class="text-center-in-table font-size-12">Column 3</th>
<th class="text-center-in-table font-size-12">Column 4</th>
<th class="text-center-in-table font-size-12">Column 5</th>
<th class="text-center-in-table font-size-12">Column 6</th>
<th class="text-center-in-table font-size-12">Column 7</th>
<th class="text-center-in-table font-size-12">Column 8</th>
<th class="text-center-in-table font-size-12">Column 9</th>
<th class="text-center-in-table font-size-12">Column 10</th>
<th class="text-center-in-table font-size-12">Column 11</th>
<th class="text-center-in-table font-size-12">Column 12</th>
<th class="text-center-in-table font-size-12">Column 13</th>
<th class="text-center-in-table font-size-12">Column 14</th>
<th class="text-center-in-table font-size-12">Column 15</th>
<th class="text-center-in-table font-size-12">Column 16</th>
<th class="text-center-in-table font-size-12">Column 17</th>
<th class="text-center-in-table font-size-12">Column 18</th>
</tr>
<tr class="default-row">
<td class="col-sticky-after-btn col-name">Information on the column</td>
<td class="text-center-in-table">
INFO
</td>
<td class="text-center-in-table">
INFO
</td>
<td class="text-center-in-table">
INFO
</td>
<td class="text-center-in-table">
INFO
</td>
<td class="text-center-in-table">
INFO
</td>
<td class="text-center-in-table">
INFO
</td>
<td class="text-center-in-table">
INFO
</td>
<td class="text-center-in-table">
INFO
</td>
<td class="text-center-in-table">
INFO
</td>
<td class="text-center-in-table">
INFO
</td>
<td class="text-center-in-table">
INFO
</td>
<td class="text-center-in-table">
INFO
</td>
<td class="text-center-in-table">
INFO
</td>
<td class="text-center-in-table">
INFO
</td>
<td class="text-center-in-table">
INFO
</td>
<td class="text-center-in-table">
INFO
</td>
<td class="text-center-in-table">
INFO
</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
And the CSS code for the table
.container{
padding: 25px;
}
td{
border:1px solid black;
}
.report-section-main .col-sticky-after-btn {
position: -webkit-sticky !important;
position: sticky !important;
left: 25px;
z-index: 2;
border: none;
background-color:white;
width: 119px;
max-width: 119px;
white-space: normal !important;
}
EDIT:
The column is showing behind the first column on the scroll Image of the problem
I have done this to my website so here is the working code.
@media screen and (max-width: 600px) {
.my_fixed_table {font-size: 13px}
}
.my_fixed_table {overflow:auto;cursor: grab;}
.my_fixed_table:active {cursor: grabbing;}
.my_fixed_table table th {background-color: #ffcf00;line-height: unset;padding: 5px;}
.my_fixed_table table td {border-bottom: 1px solid #efefef;}
.my_fixed_table table td:nth-child(odd) {background-color: lightgoldenrodyellow;}
.my_fixed_table table td:nth-child(even) {background-color: white;}
.my_fixed_table table tr:hover {background-color: #f3f3f3 !important;}
.my_fixed_table table {table-layout: fixed;margin: 0;user-select: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;}
.my_fixed_table td:first-child, .my_fixed_table th:first-child {position:sticky;left:0;z-index:10;}
.my_fixed_table thead th {position:sticky;top:0;}<div class="my_fixed_table">
<table class="table">
<thead>
<tr>
<th style="width: 15%;">Gold Weightage</th>
<th>24 Carat</th>
<th>22 Carat</th>
<th>21 Carat</th>
<th>18 Carat</th>
<th>16 Carat</th>
<th>14 Carat</th>
<th>12 Carat</th>
<th>10 Carat</th>
</tr>
</thead>
<tbody>
<tr>
<td><b>Gold per Tola</b></td>
<td>Rs. 219,621</td>
<td>Rs. 201,319</td>
<td>Rs. 192,168</td>
<td>Rs. 164,716</td>
<td>Rs. 146,414</td>
<td>Rs. 128,112</td>
<td>Rs. 109,811</td>
<td>Rs. 91,509</td>
</tr>
<tr>
<td><b>Gold per KG</b></td>
<td>Rs. 18,829,278</td>
<td>Rs. 17,260,171</td>
<td>Rs. 16,475,618</td>
<td>Rs. 14,121,958</td>
<td>Rs. 12,552,852</td>
<td>Rs. 10,983,745</td>
<td>Rs. 9,414,639</td>
<td>Rs. 7,845,532</td>
</tr>
<tr>
<td><b>Gold per Gram</b></td>
<td>Rs. 18,829</td>
<td>Rs. 17,260</td>
<td>Rs. 16,476</td>
<td>Rs. 14,122</td>
<td>Rs. 12,553</td>
<td>Rs. 10,984</td>
<td>Rs. 9,415</td>
<td>Rs. 7,846</td>
</tr>
<tr>
<td><b>Gold per Ounce</b></td>
<td>Rs. 498,540</td>
<td>Rs. 456,995</td>
<td>Rs. 436,222</td>
<td>Rs. 373,905</td>
<td>Rs. 332,360</td>
<td>Rs. 290,815</td>
<td>Rs. 249,270</td>
<td>Rs. 207,725</td>
</tr>
</tbody>
</table>
</div>