tengo una página que usa una tabla, y el contenido de esta se genera mientras agregas datos, la tabla contiene un scrollbar, originalmente lo tenía el div que contenía la tabla, pero por el padding cuando me movía se veía la tabla en los espacios vacíos, al final conseguí lo que quería, pero, cuando me desplazo por la tabla los bordes de las celdas de la columna fija se desplazan junto a la tabla, y no logró conseguir que se mantengan fijos también.
td {
border: white 1px solid;
border-collapse: collapse;
background-color: gray;
color: white;
width: auto;
padding: 5px;
min-width: 100px;
max-width: 300px;
}
th {
border: gray 1px solid;
background-color: white;
min-width: 100px;
}
table {
margin: auto;
border-collapse: collapse;
display: block;
overflow: scroll;
}
#head, #h0, #h1, #h2, #h3, #h4 {
position: -webkit-sticky;
position: sticky;
top: 0;
left: 0;
z-index: 2;
border: gray 1px solid;
}
<table id="timeTable" border="">
<tbody><tr>
<th id="head">Horas</th>
<th>Domingo</th>
<th>Lunes</th>
<th>Martes</th>
<th>Miércoles</th>
<th>Jueves</th>
<th>Viernes</th>
<th>Sabado</th>
<th>Domingo</th>
</tr>
<tr>
<th id="h0">7:00 a.m. 8:40 a.m.</th>
<td id="00" style="background-color: gray; border-color: white;"></td>
<td id="01" style="background-color: green; border-color: rgb(62, 197, 62);"><label class="cell_text" id="T01">Inglés[Teoría]</label></td>
<td id="02" style="background-color: gray; border-color: white;"></td>
<td id="03" style="background-color: green; border-color: rgb(62, 197, 62);"><label class="cell_text" id="P03">Programación[Práctica]</label></td>
<td id="04" style="background-color: gray; border-color: white;"></td>
<td id="05" style="background-color: green; border-color: rgb(62, 197, 62);"><label class="cell_text" id="P05">Inglés[Práctica]</label></td>
<td id="06" style="background-color: gray; border-color: white;"></td>
<td id="07" style="background-color: gray; border-color: white;"></td>
</tr>
<tr>
<th id="h1">8:50 a.m. 10:30 a.m.</th>
<td id="10" style="background-color: gray; border-color: white;"></td>
<td id="11" style="background-color: green; border-color: rgb(62, 197, 62);"><label class="cell_text" id="T11">Circuitos[Teoría]</label></td>
<td id="12" style="background-color: gray; border-color: white;"></td>
<td id="13" style="background-color: green; border-color: rgb(62, 197, 62);"><label class="cell_text" id="T13">Base de datos[Teoría]</label></td>
<td id="14" style="background-color: gray; border-color: white;"></td>
<td id="15" style="background-color: green; border-color: rgb(62, 197, 62);"><label class="cell_text" id="P15">Base de datos[Práctica]</label></td>
<td id="16" style="background-color: gray; border-color: white;"></td>
<td id="17" style="background-color: gray; border-color: white;"></td>
</tr>
<tr>
<th id="h2">10:40 a.m. 12:20 p.m.</th>
<td id="20" style="background-color: gray; border-color: white;"></td>
<td id="21" style="background-color: green; border-color: rgb(62, 197, 62);"><label class="cell_text" id="T21">Programación[Teoría]</label></td>
<td id="22" style="background-color: gray; border-color: white;"></td>
<td id="23" style="background-color: gray; border-color: white;"></td>
<td id="24" style="background-color: green; border-color: rgb(62, 197, 62);"><label class="cell_text" id="P24">Estadística[Práctica]</label></td>
<td id="25" style="background-color: gray; border-color: white;"></td>
<td id="26" style="background-color: gray; border-color: white;"></td>
<td id="27" style="background-color: gray; border-color: white;"></td>
</tr>
<tr>
<th id="h3">12:40 p.m. 2:20 p.m.</th>
<td id="30" style="background-color: gray; border-color: white;"></td>
<td id="31" style="background-color: gray; border-color: white;"></td>
<td id="32" style="background-color: gray; border-color: white;"></td>
<td id="33" style="background-color: gray; border-color: white;"></td>
<td id="34" style="background-color: gray; border-color: white;"></td>
<td id="35" style="background-color: green; border-color: rgb(62, 197, 62);"><label class="cell_text" id="P35">Circuitos[Práctica]</label></td>
<td id="36" style="background-color: gray; border-color: white;"></td>
<td id="37" style="background-color: gray; border-color: white;"></td>
</tr>
<tr>
<th id="h4">2:30 p.m. 4:10 p.m.</th>
<td id="40" style="background-color: gray; border-color: white;"></td>
<td id="41" style="background-color: gray; border-color: white;"></td>
<td id="42" style="background-color: gray; border-color: white;"></td>
<td id="43" style="background-color: green; border-color: rgb(62, 197, 62);"><label class="cell_text" id="T43">Estadística[Teoría]</label></td>
<td id="44" style="background-color: gray; border-color: white;"></td>
<td id="45" style="background-color: gray; border-color: white;"></td>
<td id="46" style="background-color: gray; border-color: white;"></td>
<td id="47" style="background-color: gray; border-color: white;"></td>
</tr>
</tbody></table>
Ese es un ejemplo de una tabla completa, como se autogenera puede cambiar, pero lo único que quiero es que los bordes también se mantengan fijos.