In CSS, come posso espandere una tabella per riempire un contenitore div?

Question

Desidero "ritagliare" gli spazi sullo schermo creando diversi DIV contenitore, quindi inserire il contenuto in ciascuno dei DIV. in un caso, ho bisogno di riempire un tavolo.

la parte più interna del tavolo è jpeg <img>. Non voglio usare le dimensioni fisse dei pixel ovunque, in modo che il contenuto si riduca bene nei browser di dimensioni diverse.

Dopo ripetuti tentativi ed errori, e qualche lettura su Internet, ho capito che per lasciare all'intera catena contenitore-div ---> table -> tbody -> tr -> td -> img adattarsi bene alle dimensioni, devo assicurarmi che ognuno di questi elementi abbia i seguenti attributi "height:100%; width:100; position:relative" (la posizione img stessa può essere assoluta).

Questo funziona bene solo con una tabella di 1 riga. ma se ho più righe, sembra che l'altezza della riga sia calcolata naiivamente dal suo genitore, che è tbody, perché se ho 2 righe, ogni riga è ancora alta come la t. ma anche dopo aver diviso manualmente l'altezza di TR per 2, non si adatta perfettamente al contenitore.

Quindi, come posso ridurre automaticamente il tavolo al contenitore circostante?

<style type="text/css"> 

div { 
border : 2px solid red; 
} 

#bottom-banner { 
height:40%; 
} 

#bottom-banner tbody { 
position:relative; 
height:100%; 
width:100%; 
} 

#bottom-banner tr { 
max-height:100%; 
width:100%; 
position:relative; 
height:100%; 
} 


<style type="text/css"> 

div { 
border : 2px solid red; 
} 

#bottom-banner { 
height:40%; 
} 

#bottom-banner tbody { 
position:relative; 
height:100%; 
width:100%; 
} 

#bottom-banner tr { 
max-height:100%; 
width:100%; 
position:relative; 
height:100%; 
} 
#bottom-banner table { 
position:relative; 
height:100%; 
width:100%; 
} 

#bottom-banner div { 
position:relative; 
height:100%; 
width:100%; 
} 

#bottom-banner img { 
height:100%; 
position:absolute; 
right:0; 
left:0; 
margin:auto; 
top:0; 
bottom:0; 
width:auto; 
} 
</style> 

<div id="bottom-banner"> 

<table><tbody> 
<tr> 
<td > 
<div><img src="11a2.jpg"/></div> 
</td> 
</tr> 

<tr> 
<td > 
<div><img src="11a2.jpg"/></div> 
</td> 
</tr> 

</tbody></table> 
</div> 

Answer 1

Basta impostare la larghezza e l'altezza del tuo tavolo al 100%. Ma il div genitore della tabella deve avere un'altezza assegnata se le celle sono vuote non occuperanno nessuno spazio verticale senza un'altezza specificata.

div { width: 100%;height: 500px;border: 5px yellow solid; } 
 
table { width: 100%;height: 100%;border: 3px red double; }

<div> 
 
    <table> 
 
    <tr> 
 
     <td bgcolor="#2062AF"></td> 
 
     <td bgcolor="#05BDB0"></td> 
 
     <td bgcolor="#FEFCC2"></td> 
 
     <td bgcolor="#FAA72A"></td> 
 
     <td bgcolor="#CD3450"></td> 
 
    </tr> 
 
    </table> 
 
</div>