¿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:
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