0

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.

1 respuesta 1

0

Pues no se exactamente que pasó, o porque esto afectaba, en la herramienta de desarrollador elimine el border de table y desactive los bordes al tbody, elimine el border collapse y ahora si se mantenían filos los bordes

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;
    display: block;
    overflow: scroll;
}

#head, #h0, #h1, #h2, #h3, #h4 {
    position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 2;
  border-radius: 0;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border: orange 3px solid;
}
<table id="timeTable">
            <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>

Solo le quité los bordes arriba-derecha y abajo-derecha para que no se alcance a ver parte de las otras celdas, ¿Quién me explica porque eso me afectaba?

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.