How to make my <thead></thead>
equal to my <tbody></tbody>
?
I am having problems with the <thead></thead>
and tags <tbody></tbody>
. The cells located inside both have different widths in the same column. I put a vertical scroll bar on tbody
my table element to make it easier to view, but it messed up.
Here is an example of how it is displayed on my page:
These are the styles with which I place the vertical scroll bar in tbody
my table:
thead,
tbody {
display: block;
}
tbody {
height: 150px;
overflow-y: auto;
overflow-x: hidden;
}
As you can see, in the first image the vertical scroll bar appears in my table. However, the cells in the thead
have a width that does not match the cells in the tbody
.
Here I leave all the code to help reproduce the example:
<!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>
The question is, how do I solve the problem raised here?
Thanks for your trouble.
Your problem is solved by removing this CSS rule:
Consider the following example which is a basic HTML table structure and no CSS styles defined by me:
It is important to clarify that the table structure built by the parent tag
table
in HTML has adisplay
typetable
as you can see in the following image if you inspect said element:Consider that:
block
will make the elements occupy the maximum available width, generating an arrangement one on top of the other of each element that is of this nature or is declared like this. 1table
makes elements arranged like a table by generating a 2-dimensional array according to Mozilla Developer 2 .Given the above, that rule that you had generated that your layout would be unbalanced
References
I would change
display:block;
yourthead
andtbody
todisplay:revert;
to remove all styles added by bootstrap or any styles added somewhere.If you apply it like this, the width is respected as you can see in your code that I edited.