celle della tabella di blocco per la loro dimensione predefinita a prescindere dal contenuto

Question

Se ho

<table> 
    <tr> 
     <td></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td></td> 
    </tr> 
</table> 

e

table 
    { width: 100%; height: 100%; } 

Ogni cellula occupa un quarto uguale della tavola, e la tabella si estende per adattarsi alla finestra .

Come impedire a queste celle di tabella di ridimensionarsi per adattarsi al contenuto all'interno delle celle (mentre si sta ancora adattando il contenitore del tavolo)?

Answer 1

Si potrebbe provare table-layout:fixed; - questo imposta il layout su una certa dimensione fissa (specificata in CSS) e ignora il contenuto delle celle, quindi la larghezza della cella non cambia mai. Non sono sicuro se ciò influisce sul layout verticale o meno.

More info on w3schools.

Answer 2

td{ width:50%; } funzionerà finché il tavolo non diventerà sufficientemente piccolo.

Answer 3

Si potrebbe provare a prendere una singola cella di masticare tutto lo spazio e impostare che al 100% altezza e larghezza:

<table> 
    <tr> 
     <td>Hi There.</td> 
     <td>x</td> 
    </tr> 
    <tr> 
     <td>Here is some text.</td> 
     <td class="space-hog"></td> 
    </tr> 
</table> 

e alcuni CSS:

table { 
    width: 100%; 
    height: 100%; 
} 
td { 
    white-space: nowrap; 
} 
td.space-hog { 
    width: 100%; 
    height: 100%; 
} 

E un live example. È necessario fare attenzione per evitare spiacevoli involucri di righe quando lo .space-hog fa la sua cosa, quindi lo white-space: nowrap. Se metti lo .space-hog nell'ultima riga, puoi evitare di spingere verso il basso le parti interessanti.

Answer 4

Qualcosa sulla falsariga di utilizzare overflow:hidden; forse?

Answer 5

È possibile farlo utilizzando position: absolute sul contenuto di ogni cella di tabella: perché se lo si fa, la dimensione del contenuto non influisce sulla dimensione della cella.

Per fare ciò, è necessario posizionare anche le celle della tabella (in modo che il posizionamento assoluto del contenuto sia relativo alla cella della tabella) - and/or, to support Firefox, position an extra div within the table cells poiché Firefox non consente di applicare la posizione alle celle stesse.

Per esempio, sto usando questo codice HTML:

<td><div class="bigimg"><img src="...."/></div></td> 

Insieme con il seguente CSS, in modo che le dimensioni dell'immagine non influisce sulla dimensione della cella che lo contiene:

div.bigimg 
{ 
    height: 100%; 
    width: 100%; 
    position: relative; 
} 
div.bigimg > img 
{ 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

ho impostato il height e width di div.bigimg-100% in base alle dimensioni del td che lo contiene, perché sto utilizzando Javascript per ridimensionare le immagini in fase di esecuzione per soddisfare le loro contenitori, che sono i div.bigimg.

Answer 6

Sono riuscito a farlo senza una tabella fissa. css della cella:

.dataCell { 
    display: table-cell; 
    padding: 2px 15px 2px 15px; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    width: auto; 
    max-width: 1px; 
} 

Answer 7

Aggiungi table-layout:fixed; allo styling della tabella.

Se si nota che questo aiuta a correggere la larghezza ma non l'altezza, questo è perché potrebbe esserci ancora una sorta di riempimento all'interno di ciascuna cella. Aggiungi padding:0px; allo stile di td.

Answer 8

È possibile anche bloccare le cellule ad una percentuale, al fine di mantenere la reattività, ad esempio:

td:first-child, th:first-child { 
    width: 20%; 
    } 
    // assuming you have 8 remaining columns (20 + 10*8 = 100%) 
    td:not(:first-child), th:not(:first-child) { 
    width: 10%; 
    }