1

La Cabecera de mi tabla esta el mismo tamaño que mi tbody

Lo que quiere quiero lograr es que mi thead sea el mismo tamaño que mi tbody

Enla parte superior puse position:fixed par que mi cabecera sea estatica pero el problem es que ahora no se ajusta el tamaño de mi tbody sinos toma su propio tamaño

En el tbody estoy cargando datos desde una base de datos

 <div class="table-responsive-xl " style="width:100%;overflow:auto; max-height:500px;">
            <table class="table table-bordered table-striped egt">
                <thead>
                    <tr style="position:fixed;background:#FFF;">
                        <th >Nombre</th>
                        <th>Apellido Paterno</th>
                        <th>Apellido Materno</th>
                        <th>DNI</th>
                        <th>Lugar</th>
                        <th>Fecha Nacimiento</th>
                        <th>Direccion</th>
                        <th>Telefono</th>
                        <th>Celular</th>
                        <th>Foto</th>
                        <th>E-mail</th>
                        <th>Genero</th>
                        <th>MODIFICAR</th>
                        <th>ELIMINAR</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
2
  • 2
    Creo que te hace falta una mejor formulación de tu pregunta, no vemos nada de código en texto, no vemos nada y así no podemos ayudarte. Commented el 25 nov. 2019 a las 5:00
  • Añadiendo que estilos css estas aplicando se puede formular una respuesta mas concreta para tu caso.
    – Arngue
    Commented el 25 nov. 2019 a las 14:56

2 respuestas 2

0

Tu mismo lo dices, "En la parte superior puse position:fixed", haz las mismas restricciones css tanto para thead como para tbody

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  border: 1px solid black;
} 

th,td {
  border: 1px solid black;
}

table.a {
  table-layout: auto;
  width: 180px;  
}

table.b {
  table-layout: fixed;
  width: 180px;  
}

table.c {
  table-layout: auto;
  width: 100%;  
}

table.d {
  table-layout: fixed;
  width: 100%;  
}
</style>
</head>
<body>


<h2>table-layout: auto; width: 180px:</h2>
<table class="a">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

<h2>table-layout: fixed; width: 180px:</h2>
<table class="b">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

<h2>table-layout: auto; width: 100%:</h2>
<table class="c">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

<h2>table-layout: fixed; width: 100%:</h2>
<table class="d">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

</body>


En el siguiente enlace puedes ver todas las opciones basicas que puedes realizar.

https://www.w3schools.com/cssref/pr_tab_table-layout.asp


En estos dos posts indagan un poco mas en el tema

https://css-tricks.com/fixing-tables-long-strings/

https://css-tricks.com/almanac/properties/t/table-layout/

0

Tuve un problema parecido. La solución que conseguí fue aprovechar bootstrap y crear la tabla con capas y .col, también tuve que agregar una clase (wide-mobile) con un ancho mínimo (min-width: 1024px;) para que mantuviera el efecto de tablas bootstrap en teléfonos

<div class="table-responsive px-0">
    <div class="wide-mobile">
        <section id="thead" class="container-fluid">
            <article class="row no-gutters">
                <div class="col"></div>
                <div class="col"></div>
            </article>
        </section>
        <section id="tbody" class="container-fluid">
            <article class="row no-gutters">
                <div class="col"></div>
                <div class="col"></div>
            </article>
        </section>
    </div>
</div>
@media (max-width: 800px){
    .wide-mobile{
        min-width: 1024px;
    }
}

Gracias a esto pude mejorar mucho la vista a nivel de css, espero te pueda servir

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.