Come ottenere nelle tabelle HTML per adattarsi al contenuto e lasciare che uno specifico riempia il resto

Questo è un esempio ipotetico:

table, thead, tbody, tr { width: 100%; } table { table-layout: fixed } table > thead > tr > th { width: auto; } 
 
Column A Column B Column C Column D
Data A.1 lorem Data B.1 ip Data C.1 sum l Data D.1
Data A.2 ipsum Data B.2 lorem Data C.2 some data Data D.2 a long line of text that is long
Data A.3 Data B.3 Data C.3 Data D.3

Voglio avere la larghezza di ogni singola colonna per adattarla alla sua dimensione del contenuto e lasciare il resto dello spazio per una colonna con la class “absorbing-column”, in modo che assomigli a questo:

 | 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 | |------------------------------------------------------------------------| 

Vedete, la colonna B è leggermente più grande del resto a causa dei dati aggiuntivi nella prima riga, ma la colonna D utilizza sempre lo spazio rimanente.

Ho giocato con la larghezza massima, la larghezza minima, l’auto, ecc. E non sono riuscito a capire come farlo funzionare.

In altre parole, voglio che tutte le colonne prendano la larghezza di cui hanno bisogno e non di più, quindi voglio che la colonna D utilizzi tutto lo spazio rimanente all’interno della tabella di larghezza del 100%.

Definire la larghezza della colonna assorbente

Imposta il table-layout auto e definisci una larghezza estrema su .absorbing-column .

Qui ho impostato la width al 100% perché garantisce che questa colonna abbia la massima quantità di spazio consentita, mentre le colonne senza larghezza definita si ridurranno per adattarsi al loro contenuto e non oltre.

Questo è uno dei bizzarri vantaggi di come si comportano le tabelle. La disposizione della table-layout: auto algoritmo table-layout: auto è matematicamente indulgente.

Si può anche scegliere di definire una min-width su tutti gli elementi di td per evitare che diventino troppo stretti e che la tabella si comporti bene.

 table { table-layout: auto; border-collapse: collapse; width: 100%; } table td { border: 1px solid #ccc; } table .absorbing-column { width: 100%; } 
 
Column A Column B Column C Column D
Data A.1 lorem Data B.1 ip Data C.1 sum l Data D.1
Data A.2 ipsum Data B.2 lorem Data C.2 some data Data D.2 a long line of text that is long
Data A.3 Data B.3 Data C.3 Data D.3

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

bordo aggiunto per una migliore visualizzazione (test)

maggiori informazioni su 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%; } 
 
Column A Column B Column C Column D
Data A.1 lorem Data B.1 ip Data C.1 sum l Data D.1
Data A.2 ipsum Data B.2 lorem Data C.2 some data Data D.2 a long line of text that is long
Data A.3 Data B.3 Data C.3 Data D.3

L’impostazione della larghezza CSS all’1% o al 100% di un elemento in base a tutte le specifiche che ho trovato è correlata al genitore. Sebbene Blink Rendering Engine (Chrome) e Gecko (Firefox) al momento della scrittura sembrino gestire l’1% o il 100% (riduci le colonne o una colonna per riempire lo spazio disponibile), non è garantito secondo tutte le specifiche CSS Ho potuto trovare per renderlo correttamente.

Un’opzione è quella di sostituire la tabella con i CSS flex div:

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

Funziona con i nuovi browser, cioè IE11 + vedi la tabella in fondo all’articolo.

utilizzare overflow:

 overflow: visible;