HTML: combinación de sistemas fijos y anchuras variables

que he hecho una tabla como tal:HTML: combinación de sistemas fijos y anchuras variables

<table style="width:1000px;"> 
    <tr> 
    <td>aaa</td> 
    <td id="space"></td> 
    <td class="fixed-width">bbb</td> 
    <td class="fixed-width">ccc</td> 
    </tr> 
</table>

¿Cómo puedo hacer el CSS de manera que las columnas B y C tienen un ancho fijo, el de una columna solo toma tanto espacio como sea necesario, y la columna de espacio se expande para llenar el resto de la tabla?

Fuente

2011-11-19 whotemp

No soy un gurú de CSS, pero simplemente no parecía correcto que no hubiera forma de hacerlo. Esto parece funcionar en Firefox e IE7. No he revisado otros navegadores.

La primera contracción <col> se establece (con CSS) en 0 de ancho, por lo que se contrae para ajustarse al contenido.

El segundo espacio <col> se establece (usando CSS) a un ancho mayor que el que cabe en la tabla.

La anchura de las dos últimas de ancho fijo <col> s no está en la <col>. En cambio, está configurado en el estilo <td>. Esto fuerza el ancho de la columna.

<!DOCTYPE html> 
<html> 
    <head> 
     <title>cols</title> 
     <style type="text/css"> 
      td.fixed-width { 
       width: 100px; 
       background-color:aqua 
      } 
      td.min-width {background-color:aqua} 
      td.space {border: thick blue solid} 
     </style> 
    </head> 
    <body style="width:1100px; font-family:sans-serif"> 
     <table style="width:1000px;"> 
      <col style="width:0"/> 
      <col style="width:1000px"/> 
      <col span="2" /> 
      <tr> 
       <td class="min-width">aaa</td> 
       <td class="space"></td> 
       <td class="fixed-width">bbb</td> 
       <td class="fixed-width">ccc</td> 
      </tr> 
      <tr> 
       <td class="min-width">aaa asdfasdf asdfsad</td> 
       <td class="space"></td> 
       <td class="fixed-width">bbb fasdas</td> 
       <td class="fixed-width">ccc vdafgf asdf adfa a af</td> 
      </tr> 
     </table> 
    </body> 
</html>

Fuente

2011-11-21 01:29:46

Esto funcionó! Muchas gracias. – whotemp

@whotemp - de nada. Revisé la especificación de CSS 2.1 para ver si podía encontrar algo que requiriera este comportamiento y quedé vacía. Lo que creo que esto es lo que digo es que, en el caso de una escasez de espacio horizontal en una tabla, hay una mayor prioridad en dar a las celdas en una columna lo que afirman -individualmente- que requieren, que proporcionar el ancho . –

HTML: combinación de sistemas fijos y anchuras variables

Respuesta

Cuestiones relacionadas