2

como hago para que mi <thead></thead> mi <tbody></tbody> se ajuste a todo la tabla

Bueno el <thead></thead> mi tabla es statico y el <tbody></tbody> tiene un scroll para poder ver no . pero como pueden ver no se acopla al ancho de mi tabla sinos sigue a existiendo campos vacios

alguna sugerencia para que mi <tbody></tbody> y mi <thead></thead> se auto ajuste a mi width de mi table

tengo el siguiente ejemplo de mi table

 $('table').on('scroll', function() {
  $("#" + this.id + " > *").width($(this).width() + $(this).scrollLeft());
});
html {
  font-family: verdana;
  font-size: 10pt;
  line-height: 25px;
}

table {
  border-collapse: collapse;
  width: 300px;
  overflow-x: scroll;
  display: block;
}

thead {
  background-color: #121F3D;
  color:white;
}

thead,
tbody {
  display: block;
}

tbody {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 140px;
}

td,
th {
  min-width: 100px;
  height: 25px;
  border: dashed 1px lightblue;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
    border-color:red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 col-md-6">
      <div class="table-responsive">
        <table class="table" id="table1">
          <thead>
            <tr>

              <th>Firstname</th>
              <th>Lastname</th>
              <th>Age</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>Mantenimiento De Vehiculos Y Ayuda A De Cables Sss</td>
              <td>Pitt</td>
            </tr>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
            </tr>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
            </tr>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
            </tr>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
            </tr>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
            </tr>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
            </tr>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
            </tr>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
            </tr>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    

Bueno como en mi ejemplo muestro mi table. sus columnas no se ajustan en toda la tabla sinos se limitan

Me gustaria que la las columnas ocupen todo su width de mi table pero sin perder el <thead></thead/> estatico .

alguna solución gracias

1 respuesta 1

3

Necesitas tomar el ancho de cada celda de tbody para asignarlo a las celdas de título:

  • $.each(selector, funcion): se usa para recorrer todos los elementos obtenidos por el selector
  • $('#table1 thead th'): devuelve las celdas (th) del encabezado de la tabla (thead)
  • $(selector).width(valor): establece el ancho del elemento
  • $('#table1 tbody tr'): obtiene todas las filas de tbody
    • .eq(0): selecciona solo la primera fila
    • .find('td'): devuelve todas las celdas de la fila
    • .eq(index): selecciona la celda correspondiente a la columna que se está manipulando dentro de la función (each)
    • .width(): obtiene el ancho de la celda y lo asigna a TH

Puesto que tbody se despliega como bloque, para que las filas ocupen todo el ancho de la tabla, deben desplegarse como tabla, mientras que el encabezado como bloque, para que no afecten las barras de desplazamiento.

Además, hay que recorrer todas las filas para asignar el mismo ancho a cada columna.

// Ejecutar dentro de una función para permitir eventos
function tableResize() {
  // Recorrer cada celda (th) del encabezado (thead) para asignar ancho
  $.each($('#table1 thead th'), (index, th) => {
    // Obtener ancho para celda actual
    // Buscar la celda equivalente en la primera fila de tbody para obtener ancho
    let width = $('#table1 tbody tr').eq(0).find('td').eq(index).width();
    $(th).width(width);
    // Recorrer el resto de filas de tbody para asignar ancho, excepto la primera fila
    $.each($('#table1 tbody tr'), (x, row) => {
        if(x > 0) {
            $(row).find('td').eq(index).width(width);
        }
    });
  });
}
// Aplicar cuando la ventana cambie de tamaño
$(window).on('resize', tableResize);
// Aplicar desde el inicio
tableResize();
html {
  font-family: verdana;
  font-size: 10pt;
  line-height: 25px;
}

table {
  border-collapse: collapse;
  overflow-x: scroll;
  display: block;
}

thead {
  background-color: #121F3D;
  color:white;
}

thead,
tbody {
  display: block;
}

tbody {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 140px;
}
thead tr {
  display:block;
  width:100%;
}
tbody tr {
  display:table;
  width:100%;
  box-sizing:border-box;
}

td,
th {
  min-width: 100px;
  height: 25px;
  border: dashed 1px lightblue;
  overflow: hidden;
  text-overflow: ellipsis;
    border-color:red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 col-md-6">
      <div class="table-responsive">
        <table class="table" id="table1">
          <thead>
            <tr>

              <th>Firstname</th>
              <th>Lastname</th>
              <th>Age</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>Mantenimiento De Vehiculos Y Ayuda A De Cables Sss</td>
              <td>Pitt</td>
            </tr>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
            </tr>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
            </tr>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
            </tr>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
            </tr>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
            </tr>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
            </tr>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
            </tr>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
            </tr>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

Nota: En CSS eliminé la propiedad max-width para TH y TD.

6
  • Bueno amigo gracias primeramente . Es algo de lo que busco pero me gustaria que las columnas ocupen todo el ancho de la tabla y que se llene la tabla con las 3 columnas el 16 nov. 2020 a las 22:56
  • puedes verlo en el sig link codepen.io/mauricio_85/pen/rNLoLqd el 16 nov. 2020 a las 22:57
  • @MauricioCartagenaCoria, listo, revisa la respuesta actualizada.
    – Triby
    el 16 nov. 2020 a las 23:21
  • Hola amigo bueno si funciona pero el scroll H con grandes datos ya pierde sentido las columnas. aplique el ejemplo en el Link puedes verlo -> codepen.io/mauricio_85/pen/rNLoLqd el 17 nov. 2020 a las 21:01
  • Con esa cantidad de datos no es posible ofrecerte una solución viable, porque no caben en la pantalla, deberías considerar agrupar datos y mostrarlos con salto de línea, para minimizar el número de columnas. De hecho, probé a hacerlo con dos tablas, pero al verlo en fragmento de código, el resultado fue aún peor.
    – Triby
    el 17 nov. 2020 a las 22:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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