Tengo una mesa como esta:

var mytable2 = "<tbody id='dynamic_table_2'><tr>";

for (var i = 1; i < 51; i++) {
  if (i % 5 == 1 && i != 1) {
    mytable2 += "</tr'><tr>";
  }
  mytable2 += "<td>" + i + "</td>";
}
mytable2 += "</tr></tbody></table>";
$('#here2').append(mytable2);
.container th h1 {
  font-weight: bold;
  font-size: 1em;
  text-align: center;
  color: #185875;
}

.container td {
  font-weight: normal;
  font-size: 1em;
  text-align: center;
  padding: 5px;
  -webkit-box-shadow: 0 2px 2px -2px #0E1119;
  -moz-box-shadow: 0 2px 2px -2px #0E1119;
  box-shadow: 0 2px 2px -2px #0E1119;
}

.container {
  text-align: left;
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
  display: table;
  padding: 0 0 8em 0;
}

.container td,
.container th {
  padding-bottom: 2%;
  padding-top: 2%;
  padding-left: 2%;
}


/* Background-color of the odd rows */

.container tr:nth-child(odd) {
  background-color: #323C50;
}


/* Background-color of the even rows */

.container tr:nth-child(even) {
  background-color: #2C3446;
}

.container th {
  background-color: #1F2739;
}

.container td:first-child {
  color: #FB667A;
}

.container tr:hover {
  background-color: #464A52;
  -webkit-box-shadow: 0 6px 6px -6px #0E1119;
  -moz-box-shadow: 0 6px 6px -6px #0E1119;
  box-shadow: 0 6px 6px -6px #0E1119;
}

.container td:hover {
  background-color: #FFF842;
  color: #403E10;
  font-weight: bold;
  box-shadow: #7F7C21 -1px 1px, #7F7C21 -2px 2px, #7F7C21 -3px 3px, #7F7C21 -4px 4px, #7F7C21 -5px 5px, #7F7C21 -6px 6px;
  transform: translate3d(6px, -6px, 0);
  transition-delay: 0s;
  transition-duration: 0.4s;
  transition-property: all;
  transition-timing-function: line;
}

@media (max-width: 800px) {
  .container td:nth-child(4),
  .container th:nth-child(4) {
    display: none;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="container" id="here2" style="font-family: Arial">
  <thead>
    <tr>
      <th>
        <h1>Column1</h1>
      </th>
      <th>
        <h1>Column2</h1>
      </th>
      <th>
        <h1>Column3</h1>
      </th>
      <th>
        <h1>Column4</h1>
      </th>
      <th>
        <h1>Column5</h1>
      </th>
    </tr>
  </thead>
</table>

Todo funciona bien y mi tabla se parece a esta imagen.

El problema comienza cuando quiero usar una barra de desplazamiento vertical para el tbody de esta tabla.

De MUCHAS búsquedas principalmente en SO, finalmente encontré algo que funciona pero no perfectamente. Otros han recomendado usar style='display:block;height:100px;overflow:auto; para tbody y style='display:table;table-layout:fixed;' para tr s. Cuando lo hago, la barra de desplazamiento se muestra y se puede usar, pero de repente todas las celdas se mueven a la derecha de tbody (estoy usando la configuración RTL) y se ve así:  ingrese la descripción de la imagen aquí ¡lo cual no es genial! De hecho, las celdas de tbody ya no están alineadas con las celdas de thead !!!! Estoy realmente confundido. He intentado muchas cosas, pero parece que no sé qué hacer para resolver esto.

1
Mike 28 sep. 2019 a las 22:47

1 respuesta

La mejor respuesta

Si su barra de desplazamiento no se rediseña en ningún navegador donde sea posible, su ancho es promedio 1.1rem

Luego puede diseñar thead teniendo en cuenta este ancho y establecer un padding o establecer thead como un block con un scrollbar que coincide perfectamente con su propio ancho a través de overflow-x:scroll.

Opción con overflow-x:scroll para thead

var mytable2 = "<tbody id='dynamic_table_2'><tr>";

for (var i = 1; i < 51; i++) {
  if (i % 5 == 1 && i != 1) {
    mytable2 += "</tr'><tr>";
  }
  mytable2 += "<td>" + i + "</td>";
}
mytable2 += "</tr></tbody></table>";
$('#here2').append(mytable2);
.container th h1 {
  font-weight: bold;
  font-size: 1em;
  text-align: center;
  color: #185875;
}

.container td {
  font-weight: normal;
  font-size: 1em;
  text-align: center;
  padding: 5px;
  -webkit-box-shadow: 0 2px 2px -2px #0E1119;
  -moz-box-shadow: 0 2px 2px -2px #0E1119;
  box-shadow: 0 2px 2px -2px #0E1119;
}

.container {
  text-align: left;
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
  display: table;
  padding: 0 0 8em 0;
}

.container td,
.container th {
  padding-bottom: 2%;
  padding-top: 2%;
  padding-left: 2%;
}


/* Background-color of the odd rows */

.container tr:nth-child(odd) {
  background-color: #323C50;
}


/* Background-color of the even rows */

.container tr:nth-child(even) {
  background-color: #2C3446;
}

.container th {
  background-color: #1F2739;
}

.container td:first-child {
  color: #FB667A;
}

.container tr:hover {
  background-color: #464A52;
  -webkit-box-shadow: 0 6px 6px -6px #0E1119;
  -moz-box-shadow: 0 6px 6px -6px #0E1119;
  box-shadow: 0 6px 6px -6px #0E1119;
}

.container td:hover {
  background-color: #FFF842;
  color: #403E10;
  font-weight: bold;
  box-shadow: #7F7C21 -1px 1px, #7F7C21 -2px 2px, #7F7C21 -3px 3px, #7F7C21 -4px 4px, #7F7C21 -5px 5px, #7F7C21 -6px 6px;
  transform: translate3d(6px, -6px, 0);
  transition-delay: 0s;
  transition-duration: 0.4s;
  transition-property: all;
  transition-timing-function: line;
}

@media (max-width: 800px) {
  .container td:nth-child(4),
  .container th:nth-child(4) {
    display: none;
  }
}

tbody {
  display:block;height:100px;overflow:auto;
}
tr{display:table;table-layout:fixed;width:100%;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="container" id="here2" style="font-family: Arial;">
  <thead style=" overflow-y:scroll;display:block;">
    <tr>
      <th>
        <h1>Column1</h1>
      </th>
      <th>
        <h1>Column2</h1>
      </th>
      <th>
        <h1>Column3</h1>
      </th>
      <th>
        <h1>Column4</h1>
      </th>
      <th>
        <h1>Column5</h1>
      </th>
    </tr>
  </thead>
</table>

O el método padding promedio en thead: (que en realidad es un duplicado de Cómo configurar la altura del cuerpo con desplazamiento de desbordamiento)

var mytable2 = "<tbody id='dynamic_table_2'><tr>";

for (var i = 1; i < 51; i++) {
  if (i % 5 == 1 && i != 1) {
    mytable2 += "</tr'><tr>";
  }
  mytable2 += "<td>" + i + "</td>";
}
mytable2 += "</tr></tbody></table>";
$('#here2').append(mytable2);
.container th h1 {
  font-weight: bold;
  font-size: 1em;
  text-align: center;
  color: #185875;
}

.container td {
  font-weight: normal;
  font-size: 1em;
  text-align: center;
  padding: 5px;
  -webkit-box-shadow: 0 2px 2px -2px #0E1119;
  -moz-box-shadow: 0 2px 2px -2px #0E1119;
  box-shadow: 0 2px 2px -2px #0E1119;
}

.container {
  text-align: left;
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
  display: table;
  padding: 0 0 8em 0;
}

.container td,
.container th {
  padding-bottom: 2%;
  padding-top: 2%;
  padding-left: 2%;
}


/* Background-color of the odd rows */

.container tr:nth-child(odd) {
  background-color: #323C50;
}


/* Background-color of the even rows */

.container tr:nth-child(even) {
  background-color: #2C3446;
}

.container th {
  background-color: #1F2739;
}

.container td:first-child {
  color: #FB667A;
}

.container tr:hover {
  background-color: #464A52;
  -webkit-box-shadow: 0 6px 6px -6px #0E1119;
  -moz-box-shadow: 0 6px 6px -6px #0E1119;
  box-shadow: 0 6px 6px -6px #0E1119;
}

.container td:hover {
  background-color: #FFF842;
  color: #403E10;
  font-weight: bold;
  box-shadow: #7F7C21 -1px 1px, #7F7C21 -2px 2px, #7F7C21 -3px 3px, #7F7C21 -4px 4px, #7F7C21 -5px 5px, #7F7C21 -6px 6px;
  transform: translate3d(6px, -6px, 0);
  transition-delay: 0s;
  transition-duration: 0.4s;
  transition-property: all;
  transition-timing-function: line;
}

@media (max-width: 800px) {
  .container td:nth-child(4),
  .container th:nth-child(4) {
    display: none;
  }
}

tbody {
  display:block;height:100px;overflow:auto;
}
tr{display:table;table-layout:fixed;width:100%;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="container" id="here2" style="font-family: Arial;">
  <thead style="padding-right:1.1rem;display:table;">
    <tr>
      <th>
        <h1>Column1</h1>
      </th>
      <th>
        <h1>Column2</h1>
      </th>
      <th>
        <h1>Column3</h1>
      </th>
      <th>
        <h1>Column4</h1>
      </th>
      <th>
        <h1>Column5</h1>
      </th>
    </tr>
  </thead>
</table>

También existe la opción display:grid + display:contents o el contenedor y position:sticky. Si todas estas opciones de CSS no parecen lo suficientemente buenas, la última opción es transmitir en javascript.

2
G-Cyrillus 28 sep. 2019 a las 20:08