2012-01-09 26 views
6

c'è un modo per avere la prima colonna di sinistra con una larghezza minima ... come 50%.Larghezza minima della prima colonna della tabella

Ho una quantità varia di tabelle separate (con intestazioni diverse in modo che siano dati separati).

Ovviamente le colonne delle tabelle cambiano la loro larghezza in base alla quantità di contenuto che è all'interno di esse ... se ha bisogno di spazio aggiuntivo, ci vorrà più spazio da altre colonne nella stessa tabella ... è bello ma quando c'è molto di spazio e non ha bisogno di spazio aggiuntivo quindi il suo alot più ordinato se tutti solo rimanere la stessa larghezza ... come il 50%

http://jsfiddle.net/mqatP/5/

qualsiasi idea di come fare questo senza prove in PHP quantità di contenuto sta andando dentro di loro e aggiungendo classi diverse?

Grazie, Dom

risposta

5

Sono stato sorpreso di scoprire che min-width non fa il t rick. Tuttavia, dopo aver giocato con lui per un po ', mi sono imbattuto in questa soluzione:

td:first-child { 
    width: 40%; 
    white-space: nowrap; 
} 
+0

Questo sembra essere piuttosto fresco. Anche larghezza: il 50% ha funzionato bene. Quindi li tiene tutti allineati se c'è abbastanza spazio e usa lo spazio se ce l'ha. Ho a volte 3 colonne che rovinano quelle, ma dubito che possano essere corrette senza un col-2, col-3 e stili diversi per. –

+0

Sebbene, se il testo è troppo lungo, esso trabocca piuttosto che avvolgere ... ma immagino che non ci sia davvero una via d'uscita –

2

vorrei suggerire di provare questo per fissare la larghezza della tabella in css

table-layout:fixed; 

e nella sintassi JavaScript è: object.style.tableLayout="fixed"

+0

Credo che questa sia la soluzione più pulita ma le forze di avvolgimento quando non c'è spazio che potrebbe usare –

1

si potrebbe usare

tbody>tr>td:nth-child(1), 
tbody>tr>td:nth-child(2), 
tbody>tr>td:nth-child(3) { width: 50%; } 
Problemi correlati