Come impostare la larghezza della colonna per essere il più piccola possibile?

Question

Sto provando a impostare le ultime tre colonne in modo che siano le più piccole possibili poiché sono semplicemente in possesso di icone/collegamenti per le azioni.

Vorrei anche che le colonne di testo grandi avessero il più possibile la larghezza rimanente.

Ecco quello che ero in grado di trovare, ma non ha funzionato per me:

Two columns table : one as small as possible, the other takes the rest

Questa soluzione non funziona per me, perché non ho più colonne che voglio prendere più spazio possibile, quindi non posso impostare nessuno di essi a larghezza = 100%.

force column size to smallest possible

Ho provato ad utilizzare lunghezze relative (width = "*"), ma non sembra avere alcun effetto. Forse è perché non ho impostato alcuna larghezza prima, quindi non c'è "larghezza rimanente" da distribuire?

HTML:

<table> 
    <colgroup class='data' span='5'> 
    <col class='date' span='1'/> 
    <col class='id' span='1'/> 
    <col class='title' span='1'/> 
    <col class='status' span='1'/> 
    <col class='description' span='1'/> 
    </colgroup> 
    <colgroup class='action' span='3'> 
    <col class='show' span='1'/> 
    <col class='edit' span='1'/> 
    <col class='delete' span='1'/> 
    </colgroup> 
    <tr> 
    <th>Date</th> 
    <th>ID</th> 
    <th>Title</th> 
    <th>Status</th> 
    <th>Description</th> 
    <th colspan='3'></th> 
    </tr> 

    <tr> 
    <td class='date'>medium</td> 
    <td class='id'>medium</td> 
    <td class='title'>large</td> 
    <td class='status'>medium</td> 
    <td class='description'>large</td> 
    <td class='show'>small</td> 
    <td class='edit'>small</td> 
    <td class='delete'>small</td> 
    </tr> 
</table> 

CSS:

table { 
    width: 100%; 
} 

table td.title, td.description { 
    text-align: left; 
} 

table td.date, td.id, td.status { 
text-align: center; 
} 

table td.show, td.edit, td.delete { 
} 

table colgroup.action col { 
    width:"1*"; 
} 

table colgroup.data col { 
    width:"*"; 
} 

Quindi, in ordine di priorità:

• tabella si estende su tutta la larghezza del contenitore principale

• l'ultimo thre e colonne icona/azione da più piccolo possibile, senza alcuna interruzione

• le colonne con i dati 'grandi' (titolo di classe e la descrizione) dovrebbe occupare la maggior quantità di spazio rimanente come possibili

• le colonne con i dati di 'media' dovrebbero essere la dimensione del loro contenuto con un certo margine su entrambi i lati (non mi dispiace solo gettare in una larghezza fissa se è troppo difficile da realizzare)

non ho bisogno i tag colgroup e col, ma li ho lasciati qui nel caso in cui possano essere utili. Ho provato diverse permutazioni di utilizzo e non utilizzo, ma non riesco ancora a farlo funzionare. Ho anche pensato di utilizzare le percentuali per le colonne di dati, ma vorrei che il browser determinasse le larghezze in base al contenuto effettivo anziché imporre regole predefinite che potrebbero non essere ottimali.

Answer 1

Per rispondere a una delle vostre richieste:

le ultime tre colonne icona/azione per essere il più piccolo possibile, senza alcun taglio

Per fare questo, avrei float le td s o impostarli su display:inline-block;

Se si conosce la dimensione delle icone che si stanno utilizzando, è possibile impostare la larghezza su th abov e le icone (che chiamerei class="icons").

Se non si conosce la larghezza, è possibile calcolare utilizzando jQuery.

var a = $('td.show').width(); 
var b = $('td.edit').width(); 
var c = $('td.delete').width(); 

$('.icons').css('width', a+b+c+6+"px"); 

Esempio: http://jsfiddle.net/KQs2K/1/

6px aggiuntivo necessario per riempire i bit di confine ho gettato l'esempio

Nota: queste td s saranno stack quando le dimensioni dello schermo diventa vero e proprio piccolo.

Answer 2

Per le colonne che si desidera ridurre, impostare la larghezza di 1 px:

table { 
    width: 100%; 
} 

th, td { 
    border: 1px solid #eee; 
} 

td.title, td.description { 
    text-align: left; 
} 

td.date, td.id, td.status { 
    padding: 0 10px; 
    text-align: center; 
    width: 1px; 
} 

td.show, td.edit, td.delete { 
    width: 1px; 
} 

Poi si può sbarazzarsi dei colgroups del tutto.

Vedere la demo here.

A proposito, si potrebbe prendere in considerazione l'utilizzo di CSS flexible boxes invece.