Come posso impostare la larghezza massima di una cella di una tabella utilizzando le percentuali?

100

<table>
<tr>
<td>Test</td>
<td>A long string blah blah blah</td>
</tr>
</table>

<style>
td{max-width:67%;}
</style>

Quanto sopra non funziona. Come posso impostare la larghezza massima di una cella di una tabella utilizzando le percentuali?

html css html-table

— Leo Jiang
fonte

Si prega di espandere su "non funziona" .

— Sparky

1

Devi assicurarti che il GENITORE del tuo td abbia una larghezza specifica (sia che passi la larghezza: 100%; tutto il percorso dal corpo al tuo td, oppure potresti dare al genitore (qui: tr) 1000px o quello che preferisci . Quando si utilizza %% in CSS, utilizza sempre il px esatto definito nel genitore e quindi trasforma il px in %% per i bambini, poiché hanno una dimensione relativa al genitore.

— Philipp Meissner

Per la cronaca, la larghezza massima ora funziona in Safari e Chrome. Non sono sicuro per quanto tempo sia stato supportato.

— Jacob il

71

Secondo la definizione di max-width nella specifica CSS 2.1, "l'effetto di 'min-width' e 'max-width' su tabelle, tabelle inline, celle di tabelle, colonne di tabelle e gruppi di colonne non è definito". Quindi non puoi impostare direttamente la larghezza massima su un elemento td.

Se vuoi solo che la seconda colonna occupi al massimo il 67%, puoi impostare la larghezza (che è in effetti la larghezza minima, per le celle della tabella) al 33%, ad esempio nel caso di esempio

td:first-child { width: 33% ;}

Impostarlo per entrambe le colonne non funzionerà così bene, poiché tende a far sì che i browser diano alle colonne la stessa larghezza.

— Jukka K. Korpela
fonte

Attualmente la larghezza massima funziona in Safari e Chrome. Non sono sicuro per quanto tempo sia stato supportato.

— Jacob il

114

Vecchia domanda lo so, ma ora è possibile utilizzando la proprietà css table-layout: fixedsul tag della tabella. Rispondi di seguito da questa domanda Larghezza percentuale CSS e overflow del testo in una cella di tabella

Questo è facilmente realizzabile usando table-layout: fixed, ma un po 'complicato perché non molte persone conoscono questa proprietà CSS.

table {
  width: 100%;
  table-layout: fixed;
}

Guardalo in azione sul violino aggiornato qui: http://jsfiddle.net/Fm5bM/4/

— superphonic
fonte

2

Grazie! Avevo paura che fisso significhi che non ricalcola la larghezza delle celle che non hanno alcuna larghezza impostata, ma fortunatamente non è così.

— fassl

4

Nel tuo jsfiddle se rimuovo le proprietà di larghezza, la larghezza massima non funziona ancora, quindi non sono sicuro di come questo risolva il problema.

— frezq

4

@superphonic Penso che tu sia confuso. Se rimuovi max-widthin quel jsfiddle, la larghezza rimarrà la stessa quindi non è quella max-widthche la imposta. Potrebbe essere più chiaro se lo sostituisci con uno max-width: 10%per il primo td... vedrai che non cambia. jsfiddle.net/w3f8ey22/1

— frezq

4

layout della tabella: risolto non risolve il problema OP. Magicamente non fa funzionare la "larghezza minima" su una cella di tabella. Entrambi i violini a cui si fa riferimento non hanno differenze di visualizzazione se viene rimosso table-layout: fixed.

— cmerriman

2

questa risposta è fuorviante in quanto non è correlata alla domanda

— Zoltán Süle

8

So che è letteralmente un anno dopo, ma ho pensato di condividerlo. Stavo cercando di fare la stessa cosa e mi sono imbattuto in questa soluzione che ha funzionato per me. Abbiamo impostato una larghezza massima per l'intera tabella, quindi abbiamo lavorato con le dimensioni delle celle per ottenere l'effetto desiderato.

Metti la tabella nel suo div, quindi imposta la larghezza, la larghezza minima e / o la larghezza massima del div come desiderato per l'intera tabella. Quindi, puoi lavorare e impostare la larghezza e le larghezze minime per altre celle e la larghezza massima per il div lavorando efficacemente intorno e all'indietro per ottenere la larghezza massima che volevamo.

<div id="tablediv">
<table width="100%">
 <tr>
  <td class="tdleft">Test</td>
  <td>A long string blah blah blah</td>
 </tr>
</table>
</div>

Quindi nei tuoi stili metti:

#tablediv {
    width:90%;
    min-width:800px
    max-width:1500px;
}
.tdleft {
    width:20%;
    min-width:200px;
}

Certo, questo non ti dà una larghezza "massima" di una cella di per sé, ma consente un certo controllo che potrebbe funzionare al posto di tale opzione. Non sono sicuro che funzionerà per le tue esigenze. So che ha funzionato per la nostra situazione in cui vogliamo che il lato di navigazione nella pagina si riduca su e giù fino a un certo punto, ma per tutti gli schermi larghi in questi giorni.

— Damon
fonte

0

la percentuale dovrebbe essere relativa a una dimensione assoluta, prova questo:

<table>
<tr>
<td>Testasdas 3123 1 dasd as da</td>
<td>A long string blah blah blah</td>
</tr>
</table>

<style>
table{width:200px;}
td{width:65%;border:1px solid black;}
</style>

— dov.amir
fonte