Come fare una colonna della tabella essere una larghezza minima

Question

Ecco il file di dati del modello: https://github.com/Hoektronics/BotQueue/blob/master/views/bot/dashboard_list.ejs

che sto cercando di fare 8 delle 10 colonne di una tabella di prendere solo esattamente la larghezza minima di cui hanno bisogno a, in base al testo, rispettando le intestazioni di padding e column.

Nell'immagine di esempio, desidero tutti tranne la 4a e la 9a colonna di occupare la larghezza minima. Tecnicamente, ci sono 9 intestazioni di colonna e l'ultima ha un colspan di 2. L'ultima intestazione è una span3. Vorrei che la colonna percentuale occupasse la larghezza minima necessaria e che la barra di avanzamento oi pulsanti pass/view/fail occupassero il resto.

La colonna 4 è impostata per sostituire il testo in overflow con un'ellissi.

immagine Esempio:

Answer 1

C'è un trucco che coinvolge l'impostazione alcune cellule ad una larghezza molto ridotta, e quindi applicando una proprietà white-space: nowrap:

<table> 
    <tr> 
     <td class="min">id</td> 
     <td class="min">tiny</td> 
     <td>Fills space</td> 
     <td>Fills space</td> 
     <td class="min">123</td> 
     <td class="min">small</td> 
     <td>Fills space, wider</td> 
     <td>Fills space</td> 
     <td class="min">thin</td> 
    </tr> 
</table> 

td { 
    width: auto; 
} 

td.min { 
    width: 1%; 
    white-space: nowrap; 
} 

Live demo

Come si può vedere anche nel violino sopra, nowrap impone la cella della tabella per impedire qualsiasi interruzione di riga e quindi allineare la sua larghezza al minimo possibile.

---

UPDATE:

Per comprimere automaticamente una colonna più lunga in ellissi, il text-overflow: ellipsis è quello che è probabile che desideri:

td.cell-collapse { 
    max-width: 200px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

Live demo

Questo richiede anche overflow impostato su hidden, nonché a width o max-width con un valore fisso. Aggiungi la classe cell-collapse alle celle di cui desideri limitare la larghezza.

---

precedente soluzione Javascript-base rimosso, dal momento che l'approccio puro CSS-based ora funziona in modo coerente in tutti i browser moderni. Il codice originale è ancora disponibile sul link JSfiddle, commentato.

Answer 2

Se si conoscono le dimensioni che si desidera la vostra colonna e sono fissi, io suggerisco di usare un layout di tabella fissa. Ti permette di specificare la percentuale fissa che ogni colonna assume.

Ecco un link che mi ha aiutato in una situazione simile http://css-tricks.com/fixing-tables-long-strings/