I have an html table and I want to fix the header but at the moment of doing it, I reduce the size of th and the entire table is unbalanced
thead,tbody tr{
display:table;
width:100%;
table-layout:fixed;
} thead { position: fixed; top: 0; }
Home Delivery Time (Invoices) < / strong > < / font > - > bill Invoice date Client H. Departure H. Delivery H.LRead Deliver date Hrs.Recibo Invoice Driver Vehicle Address Final delivery time Status
The problem is not with php or HTML, but with CSS (although there is also the solution ...)
I have not been able to prove it, but I suspect that the cause is:
thead
{
position:fixed;
} Well, to correct in a simple way the side effects of giving position: fixed to the header (the problem comes because "is deducted" from the table and loses the forced width of the tbody columns) would first add a class to all columns (th and td):
<thead>
<tr class="titles">
<th class="col1">Factura</th>
<th class="col2">Fecha Factura</th>
<th class="col3">Cliente</th>
<th class="col4">H.Salida</th>
...
</tr>
</thead>
<tbody>
<tr class="data">
<td class="col1">$factura</td>
<td class="col2">$fecha_Factura</td>
<td class="col3">$cliente</td>
<td class="col4">$h_salida</td>
...
</tr>
</tbody>And finally, I would expand the CSS, using those classes to give the desired size to each column (you can use pixels, percentages or the unit you prefer ...)
thead
{
position:fixed;
}
thead th,
tbody td { // Aquí establecemos un ancho por defecto para todas,
width: 60px; // de ésta forma sólo forzamos el ancho de los
} // que lo necesiten
thead th.col2,
tbody td.col2 {
width: 80px;
}
thead th.col3,
tbody td.col3 {
width: 200px;
}
...