5

Bueno lo trato de hacer es una tabla con un header estático y su body con scroll horizontal, en su esencia lo he logrado, pero el ancho de cada columna es similar, el ancho de la primera columna ID,Precio,Stock debería ser mas pequeño (adaptándose a su contenido, que simplemente son máximo 4 dígitos).

Ayúdenme con eso por favor, he pensado dando un tamaño solo a las celdas que deben ser mas pequeñas (ID,Precio,Stock), pero creo que estaría mal.

También quisiera que para distintas pantallas se adaptara la altura, pero no puedo hacerlo con porcentajes (lo he tratado pero no he podido, porque creo que debe ser una altura especificada en pixeles). Seria necesario usar media querys?

* {
  font-family: arial;
}
.header-fixed {
  display: block;
  position: relative;
  height: 100px;
  /*la que necesites*/
  max-height: 80vh;
  /*la que necesites*/
  overflow: auto;
}

.header-fixed thead,
.header-fixed tbody {
  display: block;
}

.header-fixed thead {
  position: sticky;
  display: inline-block;
  top: 0;
}

.header-fixed thead tr > th {
	background: #212529;
	border-color: #32383e;
	color: #fff;
	margin: auto;
	/*padding: 5px 20px 5px 20px;*/
}

.header-fixed tr {
  display: flex;
}

.header-fixed th,
.header-fixed td {
  min-width: 150px;
  /*La que necesites*/
  max-width: 150px;
  /*La que necesites*/
  padding: 0.2em;
}
<table class="header-fixed">
  <thead>
    <tr>
      <th scope='col' class="id">ID</th>
      <th scope='col'>Producto</th>
      <th scope='col'>Precio</th>
      <th scope='col'>Stock</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope='row'>1</th>
      <td>Producto 1</td>
      <td>3</td>
      <td class='bag'>
        <span class='badge badge-color'>6</span>
      </td>
    </tr>
    <tr>
      <th scope='row'>13</th>
      <td>Producto 2</td>
      <td>3</td>
      <td class='bag'>
        <span class='badge badge-color'>6</span>
      </td>
    </tr>
    <tr>
      <th scope='row'>21</th>
      <td>Producto 3</td>
      <td>3</td>
      <td class='bag'>
        <span class='badge badge-color'>6</span>
      </td>
    </tr>
    <tr>
      <th scope='row'>...</th>
      <td>Producto ...</td>
      <td>3</td>
      <td class='bag'>
        <span class='badge badge-color'>6</span>
      </td>
    </tr>
  </tbody>
</table>

5
  • 1
    Podrías usar la unidad de medida 4em que equivaldría al espacio que ocupan cuatro letras M.
    – imili
    Commented el 2 jul. 2019 a las 1:21
  • 1
    El problema que noto es que le pusiste una altura fija de 100px a la tabla entera con el estilo de la clase header-fixed.
    – imili
    Commented el 2 jul. 2019 a las 1:34
  • 1
    Es que debo ponerle una altura fija, o sino el scroll no funcionara. se puede poner con porcentajes? He intentado pero me ha fallado Commented el 2 jul. 2019 a las 1:43
  • 1
    Como dijistes que modificara el ancho de las columnas? Estoy tratando, pero... (.header-fixed thead tr > th:nth-child(1) { width: 2em; }) Commented el 2 jul. 2019 a las 1:44
  • 1
    Ahí publiqué el código. El scroll funciona cuando se excede el max-height.
    – imili
    Commented el 2 jul. 2019 a las 1:50

1 respuesta 1

3

Podés usar la unidad de medida em para que las celdas tengan un ancho mínimo de cuatro letras M y borrar la parte en la que se establece una altura fija a la tabla en .header-fixed { ... height: 10px; ...}. En el ejemplo uso una altura máxima de 100% para que dependa del tamaño del elemento padre, pero si la estructura de la página te lo permite, podés usar vh.

Además agregué esos tres estilos en *{} que suelen evitar desajustes molestos en las mediciones.

    * {
    font-family: arial;
    margin:0px;
    padding:0px;
    box-sizing: border-box;
  }
  body{
    height: 100vh;
  }
  .header-fixed {
    display: block;
    position: relative;
    max-height: 100%;
    overflow: auto;
  }
  .header-fixed thead,
  .header-fixed tbody {
    display: block;
  }
  .header-fixed thead {
    position: sticky;
    display: inline-block;
    top: 0;
    width: 100%;
  }
  .header-fixed thead tr > th {
  	background: #212529;
  	border-color: #32383e;
  	color: #fff;
  	margin: auto;
  }
  .header-fixed tr {
    display: flex;
  }
  .header-fixed th,
  .header-fixed td {
    width: 4em;
    padding: 0.2em;
  }
  td:nth-child(2),
  th:nth-child(2){
    /* tamaño de ID, Precio y Stock fijos (4em c/u) */
    width: calc(100% - 12em);
  }
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <body>
  <table class="header-fixed">
  <thead>
    <tr>
      <th scope='col' class="id">ID</th>
      <th scope='col'>Producto</th>
      <th scope='col'>Precio</th>
      <th scope='col'>Stock</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope='row'>1</th>
      <td>Producto 1</td>
      <td>3</td>
      <td class='bag'>
        <span class='badge badge-color'>6</span>
      </td>
    </tr>
    <tr>
      <th scope='row'>13</th>
      <td>Producto 2</td>
      <td>3</td>
      <td class='bag'>
        <span class='badge badge-color'>6</span>
      </td>
    </tr>
    <tr>
      <th scope='row'>13</th>
      <td>Producto 2</td>
      <td>3</td>
      <td class='bag'>
        <span class='badge badge-color'>6</span>
      </td>
    </tr>
    <tr>
      <th scope='row'>13</th>
      <td>Producto 2</td>
      <td>3</td>
      <td class='bag'>
        <span class='badge badge-color'>6</span>
      </td>
    </tr>
    <tr>
      <th scope='row'>13</th>
      <td>Producto 2</td>
      <td>3</td>
      <td class='bag'>
        <span class='badge badge-color'>6</span>
      </td>
    </tr>
    <tr>
      <th scope='row'>13</th>
      <td>Producto 2</td>
      <td>3</td>
      <td class='bag'>
        <span class='badge badge-color'>6</span>
      </td>
    </tr>
    <tr>
      <th scope='row'>13</th>
      <td>Producto 2</td>
      <td>3</td>
      <td class='bag'>
        <span class='badge badge-color'>6</span>
      </td>
    </tr>
    <tr>
      <th scope='row'>13</th>
      <td>Producto 2</td>
      <td>3</td>
      <td class='bag'>
        <span class='badge badge-color'>6</span>
      </td>
    </tr>
    <tr>
      <th scope='row'>13</th>
      <td>Producto 2</td>
      <td>3</td>
      <td class='bag'>
        <span class='badge badge-color'>6</span>
      </td>
    </tr>
    <tr>
      <th scope='row'>13</th>
      <td>Producto 2</td>
      <td>3</td>
      <td class='bag'>
        <span class='badge badge-color'>6</span>
      </td>
    </tr>
    <tr>
      <th scope='row'>13</th>
      <td>Producto 2</td>
      <td>3</td>
      <td class='bag'>
        <span class='badge badge-color'>6</span>
      </td>
    </tr>
    <tr>
      <th scope='row'>13</th>
      <td>Producto 2</td>
      <td>3</td>
      <td class='bag'>
        <span class='badge badge-color'>6</span>
      </td>
    </tr>
    <tr>
      <th scope='row'>13</th>
      <td>Producto 2</td>
      <td>3</td>
      <td class='bag'>
        <span class='badge badge-color'>6</span>
      </td>
    </tr>
    <tr>
      <th scope='row'>13</th>
      <td>Producto 2</td>
      <td>3</td>
      <td class='bag'>
        <span class='badge badge-color'>6</span>
      </td>
    </tr>
    <tr>
      <th scope='row'>13</th>
      <td>Producto 2</td>
      <td>3</td>
      <td class='bag'>
        <span class='badge badge-color'>6</span>
      </td>
    </tr>
    <tr>
      <th scope='row'>13</th>
      <td>Producto 2</td>
      <td>3</td>
      <td class='bag'>
        <span class='badge badge-color'>6</span>
      </td>
    </tr>
    <tr>
      <th scope='row'>13</th>
      <td>Producto 2</td>
      <td>3</td>
      <td class='bag'>
        <span class='badge badge-color'>6</span>
      </td>
    </tr>
    <tr>
      <th scope='row'>13</th>
      <td>Producto 2</td>
      <td>3</td>
      <td class='bag'>
        <span class='badge badge-color'>6</span>
      </td>
    </tr>
    <tr>
      <th scope='row'>13</th>
      <td>Producto 2</td>
      <td>3</td>
      <td class='bag'>
        <span class='badge badge-color'>6</span>
      </td>
    </tr>
    <tr>
      <th scope='row'>13</th>
      <td>Producto 2</td>
      <td>3</td>
      <td class='bag'>
        <span class='badge badge-color'>6</span>
      </td>
    </tr>
    <tr>
      <th scope='row'>13</th>
      <td>Producto 2</td>
      <td>3</td>
      <td class='bag'>
        <span class='badge badge-color'>6</span>
      </td>
    </tr>
    <tr>
      <th scope='row'>13</th>
      <td>Producto 2</td>
      <td>3</td>
      <td class='bag'>
        <span class='badge badge-color'>6</span>
      </td>
    </tr>
    <tr>
      <th scope='row'>21</th>
      <td>Producto 3</td>
      <td>3</td>
      <td class='bag'>
        <span class='badge badge-color'>6</span>
      </td>
    </tr>
    <tr>
      <th scope='row'>21</th>
      <td>Producto 3</td>
      <td>3</td>
      <td class='bag'>
        <span class='badge badge-color'>6</span>
      </td>
    </tr><tr>
      <th scope='row'>21</th>
      <td>Producto 3</td>
      <td>3</td>
      <td class='bag'>
        <span class='badge badge-color'>6</span>
      </td>
    </tr><tr>
      <th scope='row'>21</th>
      <td>Producto 3</td>
      <td>3</td>
      <td class='bag'>
        <span class='badge badge-color'>6</span>
      </td>
    </tr><tr>
      <th scope='row'>21</th>
      <td>Producto 3</td>
      <td>3</td>
      <td class='bag'>
        <span class='badge badge-color'>6</span>
      </td>
    </tr><tr>
      <th scope='row'>21</th>
      <td>Producto 3</td>
      <td>3</td>
      <td class='bag'>
        <span class='badge badge-color'>6</span>
      </td>
    </tr><tr>
      <th scope='row'>21</th>
      <td>Producto 3</td>
      <td>3</td>
      <td class='bag'>
        <span class='badge badge-color'>6</span>
      </td>
    </tr><tr>
      <th scope='row'>21</th>
      <td>Producto 3</td>
      <td>3</td>
      <td class='bag'>
        <span class='badge badge-color'>6</span>
      </td>
    </tr><tr>
      <th scope='row'>21</th>
      <td>Producto 3</td>
      <td>3</td>
      <td class='bag'>
        <span class='badge badge-color'>6</span>
      </td>
    </tr><tr>
      <th scope='row'>21</th>
      <td>Producto 3</td>
      <td>3</td>
      <td class='bag'>
        <span class='badge badge-color'>6</span>
      </td>
    </tr><tr>
      <th scope='row'>21</th>
      <td>Producto 3</td>
      <td>3</td>
      <td class='bag'>
        <span class='badge badge-color'>6</span>
      </td>
    </tr><tr>
      <th scope='row'>21</th>
      <td>Producto 3</td>
      <td>3</td>
      <td class='bag'>
        <span class='badge badge-color'>6</span>
      </td>
    </tr><tr>
      <th scope='row'>21</th>
      <td>Producto 3</td>
      <td>3</td>
      <td class='bag'>
        <span class='badge badge-color'>6</span>
      </td>
    </tr><tr>
      <th scope='row'>21</th>
      <td>Producto 3</td>
      <td>3</td>
      <td class='bag'>
        <span class='badge badge-color'>6</span>
      </td>
    </tr><tr>
      <th scope='row'>21</th>
      <td>Producto 3</td>
      <td>3</td>
      <td class='bag'>
        <span class='badge badge-color'>6</span>
      </td>
    </tr><tr>
      <th scope='row'>21</th>
      <td>Producto 3</td>
      <td>3</td>
      <td class='bag'>
        <span class='badge badge-color'>6</span>
      </td>
    </tr><tr>
      <th scope='row'>21</th>
      <td>Producto 3</td>
      <td>3</td>
      <td class='bag'>
        <span class='badge badge-color'>6</span>
      </td>
    </tr><tr>
      <th scope='row'>21</th>
      <td>Producto 3</td>
      <td>3</td>
      <td class='bag'>
        <span class='badge badge-color'>6</span>
      </td>
    </tr>
    <tr>
      <th scope='row'>...</th>
      <td>Producto ...</td>
      <td>3</td>
      <td class='bag'>
        <span class='badge badge-color'>6</span>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>

Edit: Lo estuve probando y cuando varía el ancho de algún td se desordena la tabla. Agrego th / td:nth-child(2){} para compensarlo. Lo solucioné poniéndole un ancho fijo a todas las columnas menos a la segunda que usa calc() para determinar el espacio que queda disponible y ocuparlo.

8
  • 2
    Si, en la columna producto tengo nombres de 10-20 caracteres, yo lo solucione con .header-fixed thead th:nth-child(2), .header-fixed tbody td:nth-child(2) { min-width: 8em; max-width: 400px; }. esta bien? Commented el 2 jul. 2019 a las 2:36
  • 1
    Creo que de esa manera puede variar el tamaño de la columna en distintas filas. Pero probalo y cualquier cosa avisá. Para mí, una buena solución, en este caso, es darles un tamaño fijo a las tres columnas que tienen una cantidad de caracteres mas o menos predecible; y darle el resto del espacio a la otra. Y si quisieras agregar otra columna con una cantidad variable de caracteres podrías usar calc( (100% - 12em ) /2 ) por ejemplo.
    – imili
    Commented el 2 jul. 2019 a las 2:47
  • 1
    De tu manera me quedo asi mira ibb.co/3czfv3z Commented el 2 jul. 2019 a las 2:56
  • 1
    Que raro, fijate en la consola del navegador si se está agregando algún estilo de otro lado. El .header-fixed thead tiene width: 100%?
    – imili
    Commented el 2 jul. 2019 a las 3:01
  • 1
    Si usaste eso que dijiste en el comentario, probablemente venga de ahí el problema, porque al estar sobreescribiendo el layout de la tabla, no tiene manera de hacer coincidir el tamaño las columnas de distintas filas, por eso habría que usar calc() para darles a todas el mismo tamaño.
    – imili
    Commented el 2 jul. 2019 a las 3:11

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.