6

¿Cómo hacer que mi <thead></thead> sea igual a mi <tbody></tbody>?

Estoy presentando problemas con las etiquetas <thead></thead> y <tbody></tbody>. Las celdas ubicadas dentro de ambas tienen diferentes anchuras en una misma columna. Le puse una barra de desplazamiento vertical al elemento tbody de mi tabla para que fuese más fácil visualizarla, pero se arruinó.

Aqui tengo un ejemplo de cómo se muestra en mi página: Vista Previa de la tabla

Estos son los estilos con las que coloco la barra de desplazamiento vertical al tbody de mi tabla:

thead,
tbody {
    display: block;
}
tbody {
    height: 150px;
    overflow-y: auto;
    overflow-x: hidden;
}

Como pudieron observar, en la primera imagen aparece la barra de desplazamiento vertical puesta en mi tabla. Sin embargo, las celdas del thead tienen una anchura que no coinciden con las celdas del tbody.

Acá les dejo todo el código para ayudar a reproducir ejemplo:

  <!DOCTYPE html>
  <html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />

  <title>Hello, world!</title>
  <style>
    .scrollable-menu {
      height: auto;
      max-height: 200px;
      overflow-x: hidden;
    }
    thead,
    tbody {
      display: block;
    }
    tbody {
      height: 150px;
      overflow-y: auto;
      overflow-x: hidden;
    }
  </style>
</head>
<body>
  <h1>Esto es la tabla</h1>
  <div class="table-responsive">
    <table class="table table-bordered table-striped">
      <thead>
        <tr>
          <th>Nombre</th>
          <th>Apellido P.</th>
          <th>Apellido M.</th>
          <th>DNI</th>
          <th>Lugar</th>
          <th>Fecha Nacimiento</th>
          <th>Direccion</th>
          <th>Telefono</th>
          <th>Celular</th>
          <th>Foto</th>
          <th>Email</th>
          <th>Genero</th>
          <th>Item</th>
          <th>MODIFICAR</th>
          <th>ELIMINAR</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Mauricio</td>
          <td>perez</td>
          <td></td>
          <td>9465371</td>
          <td>CB</td>
          <td>2002-01-16</td>
          <td>Tiquipaya</td>
          <td>333</td>
          <td>71751480</td>
          <td><img src="perfil/anthony-tuil-lS_eDob6DDg-unsplash_3.jpg" ;="" style="width: 50px;heigh:50px" /></td>
          <td>[email protected]</td>
          <td>Mujer</td>
          <td>511</td>
          <td><button type="button" name="edit" class="btn btn-warning btn-xs edit" id="42">Modificar</button></td>
          <td><button type="button" name="delete" class="btn btn-danger btn-xs delete" id="42">Eliminar</button></td>
        </tr>

        <tr>
          <td>123123</td>
          <td>1231321</td>
          <td>131312</td>
          <td>1231231</td>
          <td>CB</td>
          <td>2002-01-16</td>
          <td>321</td>
          <td>123123</td>
          <td>123123</td>
          <td><img src="perfil/geran-de-klerk-PuhnmljHXJ8-unsplash_1.jpg" ;="" style="width: 50px;heigh:50px" /></td>
          <td>123123</td>
          <td>Hombre</td>
          <td>321321</td>
          <td><button type="button" name="edit" class="btn btn-warning btn-xs edit" id="58">Modificar</button></td>
          <td><button type="button" name="delete" class="btn btn-danger btn-xs delete" id="58">Eliminar</button></td>
        </tr>

        <tr>
          <td>Nicolas</td>
          <td>Casas</td>
          <td>maldini</td>
          <td>321</td>
          <td>CB</td>
          <td>2002-01-16</td>
          <td>Tiquipaya</td>
          <td>321</td>
          <td>123</td>
          <td><img src="perfil/palms_road_marking_123929_3415x3415_2.jpg" ;="" style="width: 50px;heigh:50px" /></td>
          <td>123</td>
          <td>Hombre</td>
          <td>123</td>
          <td><button type="button" name="edit" class="btn btn-warning btn-xs edit" id="185">Modificar</button></td>
          <td><button type="button" name="delete" class="btn btn-danger btn-xs delete" id="185">Eliminar</button></td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

La pregunta es, ¿cómo resuelvo el problema planteado acá?

Gracias por su molestia

2
  • Hola, ¿podrías justificar el porqué de los estilos adicionales? Los veo innecesarios sabiendo que ya de por sí bootstrap le asigna estilos únicos a la tabla tal como los estás usando. Commented el 23 ene. 2020 a las 3:52
  • ese style le puse para dar limites a mi tabla para que en un cierto punto que aparesca el scroll y pueda navegar por el resto de la tabla Commented el 23 ene. 2020 a las 3:56

2 respuestas 2

6

Tu problema se resuelve con el hecho de eliminar esta regla CSS:

thead, tbody { display: block; }

Considera el siguiente ejemplo el cual es una estructura de tabla HTML básica y sin estilos CSS definidos por mi:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Ejemplo</title>
  <style>

  </style>
</head>
<body>
<table>
  <thead>
    <tr>
      <th>Uno</th>
      <th>Dos</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Elemento Uno</td>
      <td>Elemento tres</td>
    </tr>
    <tr>
      <td>Elemento Dos</td>
      <td>Elemento Cuatro</td>
    </tr>
  </tbody>
</table>
</body>
</html>

Es importante aclarar que la estructura de tablas construidas por la etiqueta padre table en HTML tiene un display de tipo table como lo puedes apreciar en la siguiente imagen si inspeccionas a dicho elemento:

introducir la descripción de la imagen aquí

Considera que:

  • Un display de tipo block hará que los elementos ocupen el ancho máximo disponible, generando un acomodo uno sobre el otro de cada elemento que sea de esta naturaleza o sea declarado así.1
  • Un display de tipo table hace a los elementos acomodarse como una tabla generando un arreglo en 2 dimensiones deacuerdo con la Mozilla Developer2.

Dado lo anterior esa regla que tenías generaba que se descuadrara tu maquetación

Referencias

1
  • Justamente iba a responder eso, sin embargo, has hecho un buen trabajo. Esta es una respuesta que se marcó como ùtil por la misma razón que se describe en este comentario. Commented el 23 ene. 2020 a las 4:25
1

Yo cambiaría el display:block; de tu thead y tbody por display:revert; para quitarle todos los estilos agregados por bootstrap o cualquier estilo agregado por algún lado.

Si lo aplicas así, el ancho se respeta como puedes ver en tu código que edité.

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

  <title>Hello, world!</title>
  <style>
    .scrollable-menu {
      height: auto;
      max-height: 200px;
      overflow-x: hidden;
    }
    
    thead,
    tbody {
      display: revert;
    }
    
    tbody {
      height: 150px;
      overflow-y: auto;
      overflow-x: hidden;
    }
  </style>
</head>

<body>
  <h1>Esto es la tabla </h1>
  <div class="table-responsive">
    <table class="table table-bordered table-striped" width="100%">
      <thead>
        <tr>
          <th width="6.66%">Nombre</th>
          <th width="6.66%">Apellido P.</th>
          <th width="6.66%">Apellido M.</th>
          <th width="6.66%">DNI</th>
          <th width="6.66%">Lugar</th>
          <th width="6.66%">Fecha Nacimiento</th>
          <th width="6.66%">Direccion</th>
          <th width="6.66%">Telefono</th>
          <th width="6.66%">Celular</th>
          <th width="6.66%">Foto</th>
          <th width="6.66%">Email</th>
          <th width="6.66%">Genero</th>
          <th width="6.66%">Item</th>
          <th width="6.66%">MODIFICAR</th>
          <th width="6.66%">ELIMINAR</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Mauricio</td>
          <td>perez</td>
          <td></td>
          <td>9465371</td>
          <td>CB</td>
          <td>2002-01-16</td>
          <td>Tiquipaya</td>
          <td>333</td>
          <td>71751480</td>
          <td><img src="perfil/anthony-tuil-lS_eDob6DDg-unsplash_3.jpg" ;="" style="width: 50px;heigh:50px"></td>
          <td>[email protected]</td>
          <td>Mujer</td>
          <td>511</td>
          <td><button type="button" name="edit" class="btn btn-warning btn-xs edit" id="42">Modificar</button></td>
          <td><button type="button" name="delete" class="btn btn-danger btn-xs delete" id="42">Eliminar</button></td>
        </tr>

        <tr>
          <td>123123</td>
          <td>1231321</td>
          <td>131312</td>
          <td>1231231</td>
          <td>CB</td>
          <td>2002-01-16</td>
          <td>321</td>
          <td>123123</td>
          <td>123123</td>
          <td><img src="perfil/geran-de-klerk-PuhnmljHXJ8-unsplash_1.jpg" ;="" style="width: 50px;heigh:50px"></td>
          <td>123123</td>
          <td>Hombre</td>
          <td>321321</td>
          <td><button type="button" name="edit" class="btn btn-warning btn-xs edit" id="58">Modificar</button></td>
          <td><button type="button" name="delete" class="btn btn-danger btn-xs delete" id="58">Eliminar</button></td>
        </tr>

        <tr>
          <td>Nicolas</td>
          <td>Casas</td>
          <td>maldini</td>
          <td>321</td>
          <td>CB</td>
          <td>2002-01-16</td>
          <td>Tiquipaya</td>
          <td>321</td>
          <td>123</td>
          <td><img src="perfil/palms_road_marking_123929_3415x3415_2.jpg" ;="" style="width: 50px;heigh:50px"></td>
          <td>123</td>
          <td>Hombre</td>
          <td>123</td>
          <td><button type="button" name="edit" class="btn btn-warning btn-xs edit" id="185">Modificar</button></td>
          <td><button type="button" name="delete" class="btn btn-danger btn-xs delete" id="185">Eliminar</button></td>
        </tr>
      </tbody>
    </table>
  </div>









  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>

</html>

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.