32 votos

En CSS, ¿cómo puedo obtener una lado izquierdo de ancho fijo en la columna del lado derecho de la tabla que utiliza el resto de la anchura?

Así que he tratado de trabajar con el puro CSS, nunca el uso de tablas para la maquetación evangelio, realmente tengo. Pero después de una increíble cantidad de dolor y de angustia, casi, casi, estoy dispuesto a dar. Estoy dispuesto a ir a algún esfuerzo para lograr las cosas en CSS, no me malinterpreten. Pero cuando parece que algunos de los más asininely cosas simples que se pueden hacer con las tablas de diseño son absolutamente imposible que en CSS, no me importa si pureza conceptual realmente comienza a recibir una paliza.

Ahora, probablemente parece que estoy enojado, y yo estoy, estoy enojado por mi tiempo perdido, estoy enojado con la gente que viene de QuarkXpress fondos de entrega me inútil de ancho fijo diseños, estoy enojado acerca de la promesa fallida de CSS. Pero no estoy tratando de iniciar un argumento; realmente quiero saber la respuesta a una simple pregunta que determinará si me dan el puro CSS cosa otra prueba o protuberancia y el uso de las tablas de diseño cuando tengo ganas de hacerlo. Porque no me gustaría volver a las tablas de diseño de pensar que esto es imposible si no lo es.

La pregunta es: ¿hay alguna manera de usar puro CSS-diseño para obtener una columna a la izquierda, que es de ancho fijo, y a la derecha de ella el lugar, una tabla de datos, y tener los datos de la tabla perfectamente tomar el resto de todo el espacio disponible? Es decir, el mismo diseño que es fácilmente alcanzable por tener una de dos células tabla de diseño con un ancho de 100% y un ancho fijo en la celda izquierda?

44voto

Zurahn Puntos 4682
<div style="width: 200px;background-color: #FFFFCC; float: left;">
Left column
</div>

<div style="margin-left: 200px; background-color: #CCFFFF">
Right column
</div>

Que debe hacerlo (obviamente implementación variará dependiendo de dónde se encuentra en la página, pero creo que ese es el concepto que estás buscando).

11voto

Paolo Bergantino Puntos 199336

Yo creo que esto es lo que estás buscando:

<table style='width: 100%;'>
  <tr>
    <td style='width: 200px;'></td>
    <td></td>
  </tr>
</table>

Gracias a mí más tarde. =P

(Estoy obviamente bromeando.... tipo de...)

9voto

Scott Muc Puntos 2212

Es esto lo que estás buscando?

Siento su dolor, pero trate de no mirar como el tiempo perdido. Estoy seguro de que usted tiene una mejor comprensión de CSS que hizo anteriormente. Seguir trabajando con él y vamos a empezar a ver las ventajas. Yo personalmente he encontrado CSS a ser una de esas cosas que se necesita mucha práctica para llegar a ser competente. He estado usando CSS basado en los diseños de 5 años y sigo aprendiendo trucos interesantes todos los días.

4voto

Mark Brittingham Puntos 18970

En primer lugar, me gustaría recomendar Eric Meyer CSS libros, así como la referencia de CSS en la web: Una Lista Aparte. Puedo usar CSS ampliamente en mi trabajo y creo que he conseguido bastante bien con ella.

Con todo lo que se dice: hacer lo que funciona. He sido a través de exactamente el dolor que has experimentado. En el final, pensé que no valía la pena comprometer mi diseño sólo para ser capaz de decir que yo no había usado las tablas.

Recuerde: usted no paga para hacer CSS - le pagan para escribir software de trabajo.

1voto

Chris Lively Puntos 59564

Me encanta la forma de CSS todavía lleva a una página de código para duplicar un par de líneas de la utilización de una tabla.

Después de la lucha contra el CSS de la guerra, he llegado a la conclusión de que "puros" en el ojo del espectador, y se han movido a más de un "vamos a utilizar lo que funciona".

El uso de CSS en lo que es bueno para: hacer que las cosas se ven bastante. El uso del DIV y SPAN cuando se puede. Pero si usted se encuentra pasando un día tratando de conseguir las cosas a la línea de la derecha a través de todos los navegadores diferentes sabores, a continuación, dar una palmada a un tabla en la que hay y seguir adelante. No te preocupes, contrario a lo que la mayoría de la gente parece pensar, un cachorro en el hecho de no morir.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X