espacio - Cómo obtener<td> en tablas HTML para que se ajuste al contenido, y permita que un<td> específico complete el resto

tablas en html5

Question

Este es un ejemplo hipotético:

table, thead, tbody, tr { width: 100%; }
    table { table-layout: fixed }
    table > thead > tr > th { width: auto; }

<table>
      <thead>
        <tr>
          <th>Column A</th>
          <th>Column B</th>
          <th>Column C</th>
          <th class="absorbing-column">Column D</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Data A.1 lorem</td>
          <td>Data B.1 ip</td>
          <td>Data C.1 sum l</td>
          <td>Data D.1</td>
        </tr>
        <tr>
          <td>Data A.2 ipsum</td>
          <td>Data B.2 lorem</td>
          <td>Data C.2 some data</td>
          <td>Data D.2 a long line of text that is long</td>
        </tr>
        <tr>
          <td>Data A.3</td>
          <td>Data B.3</td>
          <td>Data C.3</td>
          <td>Data D.3</td>
        </tr>
      </tbody>
    </table>

Quiero que el ancho de cada columna se ajuste a su tamaño de contenido, y deje el resto del espacio para la columna con la clase "columna absorbente", para que se vea así:

| HTML                                                                   | 100%
| body                                                                   | 100%
| table                                                                  | 100%
|------------------------------------------------------------------------|
| Column A | Column B       | Column C | Column D                        |
|------------------------------------------------------------------------|
| Column A | Column B lorem | Column C | Column D                        |
| Column A | Column B       | Column C | Column D                        |
| Column A | Column B       | Column C | Column D                        |
|------------------------------------------------------------------------|

Verá, la columna B es un poco más grande que el resto debido a los datos adicionales en la primera fila, pero la columna D siempre consume el espacio restante.

Jugué con max-width, min-width, auto, etc. y no pude encontrar la manera de hacerlo funcionar.

En otras palabras, quiero que todas las columnas tomen el ancho que necesiten y no más, y luego quiero que la Columna D use todo el espacio restante dentro de la tabla de 100% de ancho.

Answer 1

Definir ancho de .absorbing-column

Establezca table-layout en auto y defina un ancho extremo en .absorbing-column .

Aquí he establecido el width al 100% porque garantiza que esta columna ocupe la mayor cantidad de espacio permitido, mientras que las columnas sin ancho definido se reducirán para ajustarse a su contenido y no más.

Este es uno de los beneficios peculiares de cómo se comportan las tablas. El table-layout: auto algoritmo table-layout: auto es matemáticamente indulgente.

Incluso puede elegir definir un min-width en todos los elementos td para evitar que se vuelvan demasiado estrechos y la mesa se comportará bien.

table {
    table-layout: auto;
    border-collapse: collapse;
    width: 100%;
}
table td {
    border: 1px solid #ccc;
}
table .absorbing-column {
    width: 100%;
}

<table>
  <thead>
    <tr>
      <th>Column A</th>
      <th>Column B</th>
      <th>Column C</th>
      <th class="absorbing-column">Column D</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data A.1 lorem</td>
      <td>Data B.1 ip</td>
      <td>Data C.1 sum l</td>
      <td>Data D.1</td>
    </tr>
    <tr>
      <td>Data A.2 ipsum</td>
      <td>Data B.2 lorem</td>
      <td>Data C.2 some data</td>
      <td>Data D.2 a long line of text that is long</td>
    </tr>
    <tr>
      <td>Data A.3</td>
      <td>Data B.3</td>
      <td>Data C.3</td>
      <td>Data D.3</td>
    </tr>
  </tbody>
</table>

Answer 2

Establecer el ancho de CSS en 1% o 100% de un elemento de acuerdo con todas las especificaciones que pude averiguar está relacionado con el padre. Aunque Blink Rendering Engine (Chrome) y Gecko (Firefox) en el momento de escribir parece manejar ese 1% o 100% (hacer columnas encogibles o una columna para llenar el espacio disponible), no está garantizado de acuerdo con todas las especificaciones de CSS Podría encontrarlo para representarlo correctamente.

Una opción es reemplazar la tabla con CSS divs flexibles:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Eso funciona en nuevos navegadores, es decir, IE11 + ver tabla en la parte inferior del artículo.

Answer 3

demo - http://jsfiddle.net/victor_007/ywevz8ra/

borde añadido para una mejor vista (prueba)

más información sobre white-space en white-space

table{
    width:100%;
}
table td{
    white-space: nowrap;  /** added **/
}
table td:last-child{
    width:100%;
}

    table {
      width: 100%;
    }
    table td {
      white-space: nowrap;
    }
    table td:last-child {
      width: 100%;
    }

<table border="1">
  <thead>
    <tr>
      <th>Column A</th>
      <th>Column B</th>
      <th>Column C</th>
      <th class="absorbing-column">Column D</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data A.1 lorem</td>
      <td>Data B.1 ip</td>
      <td>Data C.1 sum l</td>
      <td>Data D.1</td>
    </tr>
    <tr>
      <td>Data A.2 ipsum</td>
      <td>Data B.2 lorem</td>
      <td>Data C.2 some data</td>
      <td>Data D.2 a long line of text that is long</td>
    </tr>
    <tr>
      <td>Data A.3</td>
      <td>Data B.3</td>
      <td>Data C.3</td>
      <td>Data D.3</td>
    </tr>
  </tbody>
</table>

Answer 4

usar desbordamiento:

overflow: visible;