Impostazione del contenuto delle celle tabella basata su larghezza disponibile

Ho una tabella HTML le cui celle contengono, tra le altre cose, campate, in questo modo:Impostazione del contenuto delle celle tabella basata su larghezza disponibile

... 
<td> 
    <span style="height: 20px; width: 20px; margin-left: 2px;"> 
    <span style="height: 20px; width: 20px; margin-left: 2px;"> 
    <span style="height: 20px; width: 20px; margin-left: 2px;"> 
</td> 
...

che sto cercando un modo per ridurre la larghezza della quelli span, piuttosto che la linea li avvolgono, quando la cella della tabella contenente è troppo stretta per mostrarli tutti su una riga. Ho provato a giocare con l'impostazione degli max-width degli span a 20px e quindi utilizzando una percentuale per la larghezza, ma ciò non funziona perché la cella della tabella tenta di essere larga solo quanto il suo contenuto.

La larghezza minima della cella della tabella corrisponderebbe alla larghezza necessaria per visualizzare l'intestazione su 1 riga.

Per i tipi visivi, ecco quello che ho attualmente quando c'è abbastanza larghezza:

enter image description here

Ecco quello che ho attualmente quando non c'è abbastanza larghezza:

enter image description here

Ed ecco come vorrei che fosse quando non c'è abbastanza larghezza per ogni span per essere un 20px completo:

enter image description here

Nel caso non è ovvio, le campate sono i quadrati colorati nei TXEs, RDBs e RavenNets colonne.

fonte

2010-02-17 Matt Ball

+1 per fare la domanda in modo chiaro, conciso e con i modelli di ciò che hai e di ciò che ti serve! :) –

+1 allo stesso modo. Buona forma –

Grazie. Ho pensato che nessuno volesse guardare il mio codice sorgente HTML FF-only, e tu sai cosa dicono di un'immagine vale la pena in parole ... –

Non sono riuscito a trovare un modo soddisfacente in puro CSS per fare ciò che volevo. Ho già implementato un file di configurazione dell'applicazione (come un file .ini, più o meno), quindi ho aggiunto la larghezza desiderata a questa configurazione. Non è una soluzione generica, ma si adatta perfettamente alle mie esigenze.

fonte

2010-02-22 16:08:37

Avete considerato di impostare una larghezza minima sul td? o un div wrapper nel td, ma al di fuori delle span?

fonte

2010-02-17 19:17:15

La larghezza 'td' è il problema qui. Il problema non è che il 'td' sta diventando troppo stretto. Al contrario, il 'td' è esattamente largo quanto deve essere. Il problema è spremere il contenuto di 'td' in modo che non si sposti alla riga successiva. –

Utilizzare <td nowrap> o <td style="white-space:nowrap;"> per evitare l'involucro. Generalmente una cella di tabella si espande per adattarsi al suo contenuto, a meno che non sia consentito avvolgere, o hai limitato la sua larghezza in qualche altro modo.

fonte

2010-02-17 19:24:32 Ray

Ho provato entrambi (fanno la stessa cosa) ma non funziona, come mi aspetterei. Ho (attualmente) impostato una larghezza esplicita sul contenuto della cella e, sì, la larghezza della cella è vincolata - è per questo che ho bisogno di ridurne il contenuto in primo luogo. –

@bears - nome spaventoso! - Beh, pensavo di provare prima l'ovvio. L'impostazione della larghezza funziona solo sugli elementi block -level, non su span. Qual è il contenuto dei tuoi span? Come è il set di colori? Immagini? Colori BG? ? – Ray

Gli spazi sono vuoti. Fino a circa 30 minuti prima che ho postato la mia domanda, gli span erano div che erano "float: left' ed; si sono comportati esattamente allo stesso modo. Ho anche giocato con l'uso di 'display: inline-block' a questo scopo. Il colore è impostato usando uno sfondo '-moz-linear-gradient'. –

Questo tipo sembra voler fare qualcosa di simile a quello che si desidera in Firefox 3.6. Il requisito fondamentale sembra essere che la larghezza della tabella non può essere in pixel.

<!DOCTYPE HTML> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" 
href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css"> 

<style type="text/css"> 
    .indicator { 
     display:block; 
     white-space:nowrap; 
     min-width:8px; 
     max-width:300px; 
     width:100%; 
    } 

    .indicator li { 
     border:outset 2px; 
     display:inline-block; 
     height:80px; 
     min-width:2px; 
     max-width:80px; 
     padding:0 0 0 2px; 
     width:25%; 
    } 

    .ok { background:#0f0 } .caution { background:#ff0 } 
    .alert { background:#f00 } .inactive { background:#0ff } 

    table { width:100% } 
    td { width:100% } 

</style> 

</head> 

<body> 

<table><tr><td> 
<ul class="indicator"> 
    <li class="ok"></li> <li class="caution"></li> 
    <li class="alert"></li> <li class="inactive"></li> 
</ul> 
</td></tr></table> 

</body> 
</html>

fonte

2010-02-17 20:00:47

Impostazione del contenuto delle celle tabella basata su larghezza disponibile

risposta

Problemi correlati