es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

CSS: prevenir que la columna crezca en display: table

30 May, 2023 Programación

Tengo una tabla con 2 columnas y 2 filas. Me gustaría que la primera columna ocupara solo el espacio necesario, pero está ocupando el 50% del espacio:

.table {
  display: table;
  width: 100%;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
}

<div class='table'>
  <div class='table-row'>
    <div class='table-cell a'>a1</div>
    <div class='table-cell b'>b1</div>
  </div>
  <div class='table-row'>
    <div class='table-cell a'>a2</div>
    <div class='table-cell b'>b2</div>
  </div>
</div>

El contenido de la primera columna tiene un ancho variable, por lo que no puedo establecer un ancho estático en esa columna.

Usando una visualización de tabla, ¿cómo puedo hacer que la primera columna ocupe solo el espacio necesario? ¡Cualquier indicación sería muy apreciada!

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para hacer que la primera columna de la tabla ocupe solo el espacio necesario, se puede agregar la propiedad CSS “width: auto” a la clase de las celdas de la primera columna de la tabla.

    Aquí está el código CSS actualizado:

    .table {
  display: table;
  width: 100%;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
}

.table-cell.a {
  width: auto;
}

    Y aquí está el código HTML actualizado:

    <div class='table'>
  <div class='table-row'>
    <div class='table-cell a'>a1</div>
    <div class='table-cell b'>b1</div>
  </div>
  <div class='table-row'>
    <div class='table-cell a'>a2</div>
    <div class='table-cell b'>b2</div>
  </div>
</div>

    Al agregar la propiedad “width: auto” a las celdas de la primera columna, su ancho se ajustará para adaptarse al contenido dentro de ellas, lo que permitirá que la columna ocupe solo el espacio necesario.

Comments are closed.