2

introducir la descripción de la imagen aquítengo una tabla html y quiero fijar la cabecera pero al momento de hacerlo se me reduce el tamaño de los th y se descuadra toda la tabla

thead,tbody tr{
display:table;
width:100%;
table-layout:fixed;

} thead {
position:fixed; top:0; }

Tiempo De Entrega a Domicilio (Facturas)</strong></font>--> Factura Fecha Factura Cliente H.Salida H.Entrega H.LLegada Fecha Entrega Hrs.Recibo Factura Chofer Vehiculo Direccion Tiempo Final de entrega Estatus

1 respuesta 1

5

El problema no lo tienes con php ni con HTML, sino con CSS (aunque ahí también está la solución...)

No he podido probarlo, pero sospecho que el causante es:

thead
{
    position:fixed;
}

Bien, para corregir de una forma sencilla los efectos secundarios de darle position: fixed a la cabecera (el problema viene porque "se deprende" de la tabla y pierde el ancho forzado de las columnas del tbody) primero añadiría una clase a todas las columnas (th y 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>

Y por último, ampliaría el CSS, usando esas clases para dar el tamaño deseado a cada columna (puedes usar pixeles, porcentajes o la unidad que prefieras...)

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;
}

...

5
  • el class="col1 " para que me sirve
    – jasiel
    el 2 oct. 2018 a las 18:56
  • es necesario para localizar los elementos desde css, de otra forma cambiarías todas las tablas...
    – jarios
    el 2 oct. 2018 a las 19:54
  • sigue igual aun con los valores fijos no hay otra forma de fijar la cabecera aunque no sea con css ??
    – jasiel
    el 2 oct. 2018 a las 20:41
  • CSS es la forma correcta de hacerlo... si actualizas tu código te podré decir dónde está el problema
    – jarios
    el 3 oct. 2018 a las 7:36
  • ya resolvi el problema muchas gracias
    – jasiel
    el 3 oct. 2018 a las 17:53

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.