Come posso specificare in HTML o CSS la larghezza minima assoluta di una cella di tabella

Question

Riepilogo

Qual è il modo migliore per garantire che la cella di una tabella non possa essere inferiore a una determinata larghezza minima.

Esempio

Voglio assicurarmi che tutte le celle in una tabella abbiano una larghezza di almeno 100 px rispetto alla larghezza del contenitore delle tabelle.Se c'è più spazio disponibile, le celle della tabella dovrebbero riempire quello spazio.

Compatibilità del browser

È possibile che mi piacerebbe trovare una soluzione che funzioni

• Cioè 6-8
• FF 2-3
• Safari

In ordine di preferenza.

Answer 1

Questo CSS dovrebbe essere sufficiente:

td { min-width: 100px; }

Tuttavia, non sempre viene rispettato correttamente (l'attributo min-width) da tutti i browser (ad esempio, IE6 non lo gradisce molto).

Modificare: Per quanto riguarda una soluzione IE6 (e precedenti), per quanto ne so non ce n'è una che funzioni in modo affidabile in tutte le circostanze.Utilizzando l'attributo HTML nowrap non si ottiene realmente il risultato desiderato, poiché ciò impedisce semplicemente le interruzioni di riga nella cella, anziché specificare una larghezza minima.

Tuttavia, se nowrap viene utilizzato insieme a una normale proprietà di larghezza della cella (come l'utilizzo di width:100px), il 100px agirà Piace una larghezza minima e la cella si espanderà comunque con il testo (a causa del nowrap).Questa è una soluzione tutt'altro che ideale, che non può essere completamente applicata utilizzando i CSS e, come tale, sarebbe noiosa da implementare se si hanno molte tabelle a cui si desidera applicarla.(Ovviamente, l'intera soluzione alternativa fallisce se si desidera avere comunque interruzioni di riga dinamiche nelle celle).

Answer 2

Un altro hackerare è il vecchio trucco del pixel trasparente 1x1.Inserisci un'immagine gif trasparente 1x1 e imposta la sua larghezza nel tag immagine sulla larghezza desiderata.Ciò costringerà la cella ad essere larga almeno quanto l'immagine.

Answer 3

So che questa è una vecchia domanda, ma ho pensato di condividere qualcosa che non è stato menzionato (anche se piuttosto semplice nel concetto...) puoi semplicemente inserire un <div> all'interno della tabella (in uno dei <td>o qualcosa del genere) e impostare il file <div> A min-width.il tavolo si fermerà al <div>la larghezza.Ho pensato di buttarlo lì nel caso qualcuno lo trovasse su Google.Inoltre, non sono così sicuro di come viene gestita la larghezza minima in I.E6.ma questo è già stato trattato in un'altra risposta.

Answer 4

Ho avuto un certo successo con:

    min-width: 193px;
    width:auto !important; 
    _width: 193px;  /* IE6 hack */

Basato su una combinazione della risposta di Vatos e di un articolo sull'altezza minima qui: http://www.dustindiaz.com/min-height-fast-hack/

Answer 5

che ne dici di questa proprietà CSS

min-width: 100px

ma non funziona realmente in IE6 se non sbagliato

se non vuoi farlo in modo CSS, suppongo che tu possa aggiungere questo attributo

nowrap="nowrap"

nel tag dei dati della tabella

Answer 6

Questo è un modo cross-browser per impostare la larghezza minima e/o l'altezza minima:

{
width (or height): auto !important;
width (or height): 200px;
min-width (or min-height): 200px;
}

IE 6 non capisce !important
IE 6 vede larghezza/altezza: 200px (sovrascrittura automatica)

Altri browser comprendono il min- e il !important

Non ho familiarità al 100% con il comportamento delle larghezze negli elementi TD, ma tutto funziona bene, ad esempio, sui tag DIV

A proposito:

Basato su una combinazione della risposta di Vatos e di un articolo sull'altezza minima qui: http://www.dustindiaz.com/min-height-fast-hack/

Questo non funziona a causa dell'ordine delle prime 2 righe, devono essere nell'ordine giusto (pensa a quanto sopra) ;)

Answer 7

IE6 gestisce la larghezza come larghezza minima:

td {
    min-width: 100px;
    _width: 100px;/* IE6 hack */
}

Se vuoi che IE6 gestisca la larghezza come i normali browser, assegnagli un overflow:visible;(non è il caso qui)