Tabla con ancho del 100% que deja espacio para div flotante

Question

Tengo una tabla que estoy usando para un formulario. La solución necesita que sea ajustable automáticamente a dos escenarios:

• Cuando no hay un div flotante a la derecha de la tabla, quiero la tabla para ocupar el 100% de la anchura.

• Cuando hay un div flotante a la derecha de la tabla, quiero que la tabla dé espacio para este div y ocupe el espacio horizontal restante.

¿Cómo puedo hacer esto?

Answer 1

Coloque la tabla en un div con un overflow que no sea visible y ocupará el área restante junto al elemento flotante. Entonces, la tabla dentro que puede tener un width:100%. El código está abajo y he aquí un jsFiddle ejemplo: 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

Se puede quitar el div hacia la derecha con

display:none; 

Puede reservar su espacio usando

visibility:hidden; 

La mesa tendrá una anchura de 100% por lo que cuando el div es display: none, el div no ocupará espacio y la tabla se expandirá de forma natural. Si solo oculta el div, la mesa mantendrá un ancho menor en función del ancho del div a la derecha.

Esta información está disponible en W3Schools