Tabella con larghezza del 100% che lascia spazio al div floating

Question

Ho una tabella che sto utilizzando per un modulo. La soluzione ha bisogno di essere regolabile automaticamente a due scenari:

• Quando non c'è div galleggiante alla destra della tabella, voglio che il tavolo a prendere fino al 100% della larghezza.

• Quando c'è un div flottante alla destra del tavolo, voglio che la tabella dia spazio a questo div e occupi lo spazio orizzontale rimanente.

Come posso fare questo?

Answer 1

Inserire il tavolo in un div con un overflow che non sia visible e occuperà l'area rimanente accanto all'elemento flottato. Quindi, la tabella interna può avere un width:100%. Il codice è qui sotto e ecco un esempio jsfiddle: http://jsfiddle.net/rgthree/uEt35/

CSS

.floater { 
    float:right; 
} 

.tbl-container { 
    overflow:hidden; 
} 

.tbl-container > table { 
    width:100%; 
} 

HTML

​<div class="floater"> 
    This is to the right. 
</div> 
<div class="tbl-container"> 
    <table> 
     <tr> 
      <td>hi</td> 
     </tr> 
    </table> 
</div> 

Answer 2

È possibile rimuovere il div a destra utilizzando

display:none; 

È possibile prenotare il proprio spazio con

visibility:hidden; 

La tabella avrà una larghezza di 100% in modo che quando il div è display: none, il div non avrà lo spazio e la tabella si espanderà in modo naturale. Se si nasconde solo la div la tabella manterrà una larghezza minore in base alla larghezza del div a destra.

Questa informazione è disponibile presso W3Schools