espacio - tablas en html5
En CSS, ¿cómo obtengo una columna de ancho fijo en el lado izquierdo con una tabla en el lado derecho que usa el resto del ancho? (10)
Para mantener actualizada esta pregunta, aquí hay 5 maneras en que puede lograr lo mismo usando CSS2 y CSS3.
Ejemplo 1: flotadores y margen
Esta es la forma en que se ha hecho durante años: simple y efectiva.
#example1 .fixedColumn {
width: 180px;
float: left;
background-color: #FCC;
padding: 10px;
}
#example1 .flexibleColumn {
margin-left: 200px;
background-color: #CFF;
padding: 10px;
}
<div id="example1">
<div class="fixedColumn">
Fixed Column
</div>
<div class="flexibleColumn">
Flexible Column
</div>
</div>
Ejemplo 2: CSS calc ();
calc() funciona desde IE9 hacia arriba, aunque el soporte en algunas versiones del navegador de Android es un poco flakey: http://caniuse.com/#feat=calc
#example2.calc {
overflow: hidden;
}
#example2.calc .fixedColumn {
width: 180px;
float: left;
background-color: #FCC;
padding: 10px;
}
#example2.calc .flexibleColumn {
width: calc(100% - 220px); /*200px for the fixed column and 20 for the left and right padding */
float: left;
background-color: #CFF;
padding: 10px;
}
<div id="example2" class="calc">
<div class="fixedColumn">
Fixed Column
</div>
<div class="flexibleColumn">
Flexible Column
</div>
</div>
Ejemplo 3: visualización CSS como tabla
#example3.table {
display: table;
width: 100%;
}
#example3.table .fixedColumn {
width: 180px;
display: table-cell;
background-color: #FCC;
padding: 10px;
}
#example3.table .flexibleColumn {
display: table-cell;
background-color: #CFF;
padding: 10px;
}
<div id="example3" class="table">
<div class="fixedColumn">
Fixed Column
</div>
<div class="flexibleColumn">
Flexible Column
</div>
</div>
Ejemplo 4: CSS3 Flexbox
Flexbox tiene una compatibilidad sorprendentemente buena en todos los navegadores: http://caniuse.com/#search=flex
#example4.flex {
display: flex;
}
#example4.flex .fixedColumn {
width: 180px;
background-color: #FCC;
padding: 10px;
}
#example4.flex .flexibleColumn {
flex: 1 100%;
flex-basis: auto;
background-color: #CFF;
padding: 10px;
}
<div id="example4" class="flex">
<div class="fixedColumn">
Fixed Column
</div>
<div class="flexibleColumn">
Flexible Column
</div>
</div>
Ejemplo 5: Cuadrícula CSS3
Por el momento, los únicos navegadores que soportan una implementación de la grid de CSS3 son IE10, IE11 y Edge (de ahí los prefijos del navegador -ms- ), así que asegúrese de ver esto en uno de los otros, de lo contrario no funcionará correctamente.
EDITAR He incluido la especificación experimental de cromo aquí que puede ver habilitando las funciones experimentales en Chrome que se detallan aquí .
http://caniuse.com/#search=grid
#example5.grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: 200px 1fr;
-ms-grid-rows: auto;
grid-template-columns: 200px 1fr;
grid-template-rows: auto;
}
#example5.grid .fixedColumn {
-ms-grid-column: 1;
background-color: #FCC;
padding: 10px;
}
#example5.grid .flexibleColumn {
-ms-grid-column: 2;
background-color: #CFF;
padding: 10px;
}
<div id="example5" class="grid">
<div class="fixedColumn">
Fixed Column
</div>
<div class="flexibleColumn">
Flexible Column
</div>
</div>
Aquí hay un códec que presenta las 5 técnicas:
2 columnas (1 fijo, 1 flexible) ¡5 formas diferentes!
Así que he intentado trabajar con el evangelio CSS puro, nunca usar-tablas-para-diseño, realmente lo tengo. Pero después de una increíble cantidad de dolor y angustia, estoy a punto de darme por vencida. Estoy dispuesto a hacer algunos esfuerzos para lograr cosas en CSS, no me malinterpreten. Pero cuando parece que algunas de las cosas más sencillas que se pueden hacer con las tablas de diseño son completamente imposibles en CSS, no me importa si la pureza conceptual realmente comienza a tener una paliza.
Ahora, probablemente parezca que estoy enojado, y lo estoy; Estoy enojado por mi tiempo perdido, estoy enojado por la gente que sale de fondos de QuarkXpress y me entrega diseños inútiles de ancho fijo, estoy enojado por la promesa fallida de CSS. Pero no estoy tratando de comenzar una discusión; Realmente quiero saber la respuesta a una simple pregunta que determinará si le doy otra oportunidad al tema de CSS puro o si no lo hago, y uso las tablas de diseño cuando me da la gana. Porque odiaría volver a las tablas de diseño pensando que esto es imposible si en realidad no lo es.
La pregunta es: ¿hay alguna forma de usar CSS puro para tener una columna a la izquierda, que es de ancho fijo, y a la derecha de ella colocar una tabla de datos, y tener la tabla de datos ocupando el resto de cualquier espacio disponible? Es decir, ¿el mismo diseño que se puede lograr fácilmente teniendo una tabla de diseño de dos celdas con un ancho del 100% y un ancho fijo en la celda izquierda?
Algo como esto:
<div style="position: relative; width: 100%">
<div style="position: absolute; left: 0; top: 0; width: 200px">
left column
</div>
<div style="position: absolute; left: 200px; top: 0">
other stuff
</div>
</div>
Por supuesto, probablemente debería poner los estilos en una hoja de estilo separada en lugar de en línea. Y una sola columna de ancho fijo a la izquierda es bastante simple, pero de vez en cuando veo otros diseños que se pueden hacer fácilmente con tablas pero, hasta donde sé, son diabólicamente difíciles con CSS.
Creo que esto es lo que estás buscando:
<table style=''width: 100%;''>
<tr>
<td style=''width: 200px;''></td>
<td></td>
</tr>
</table>
Agradéceme después. = P
(Obviamente estoy bromeando ... más o menos ...)
Es casi seguro que hay una respuesta que implica la aplicación display: table and display: table-cell a los elementos en cuestión. Lo que quiere decir ... no.
Me encanta cómo CSS todavía tiene una página completa de código para duplicar un par de líneas de uso de una tabla.
Después de luchar en la guerra de CSS, llegué a la conclusión de que "puro" está en el ojo del espectador y me he movido a un enfoque más "usemos simplemente lo que funciona".
Use CSS en lo que es bueno: hacer que las cosas se vean bonitas. Use DIV y SPAN cuando pueda. Pero si te encuentras pasando un día tratando de alinear las cosas en todos los sabores del navegador, dales una paliza y sigue adelante. No se preocupe, al contrario de lo que la mayoría de la gente parece pensar, un cachorro de hecho no morirá.
Primero, recomendaría los libros CSS de Eric Meyer, así como la referencia CSS en la web: A List Apart . Uso mucho CSS en mi trabajo y creo que me he vuelto bastante bueno con eso.
Con todo esto dicho: haz lo que funcione. He pasado exactamente por el dolor que acabas de experimentar. Al final, pensé que no valía la pena comprometer mi diseño solo para poder decir que no había usado tablas.
Recuerde: no le pagan para hacer CSS: se le paga por escribir un software que funcione.
<div style="width: 200px;background-color: #FFFFCC; float: left;">
Left column
</div>
<div style="margin-left: 200px; background-color: #CCFFFF">
Right column
</div>
Eso debería hacerlo (obviamente, la implementación variará en función de dónde se encuentre en la página, pero creo que ese es el concepto que está buscando).
Como dice Sparr, hay CSS que cumple específicamente este requisito, porque no es posible hacerlo de otra manera sin compromisos diversos, posiblemente inaceptables, y eso es display:table , display:table-cell , etc.
Lamentablemente, Internet Explorer anterior a Internet Explorer 8 no es compatible con estos modos de visualización, por lo que el problema no es realmente con CSS, sino con una falla de los navegadores (en realidad Internet Explorer, los otros están bien) para soportar CSS de manera adecuada.
La buena noticia es que esto está cambiando y, a su debido tiempo, tendremos una solución CSS adecuada. Mientras tanto, elige uno de los compromisos en las otras respuestas.
Es posible que desee probar estos:
http://www.alistapart.com/stories/practicalcss/
http://www.w3.org/2002/03/csslayout-howto
Este es el por qué:
http://en.wikipedia.org/wiki/Tableless_web_design
http://davespicks.com/essays/notables.html
Más HowTOs:
div.row {
clear: both;
padding-top: 10px;
}
div.row span.label {
float: left;
width: 100px;
text-align: right;
}
div.row span.formw {
float: right;
width: 335px;
text-align: left;
}
<div style="width: 350px; background-color: #cc9;
border: 1px dotted #333; padding: 5px;
margin: 0px auto";>
<form>
<div class="row">
<span class="label">Name:</span><span
class="formw"><input type="text" size="25" /></span>
</div>
<div class="row">
<span class="label">Age:</span><span
class="formw"><input type="text" size="25" /></span>
</div>
<div class="row">
<span class="label">Shoe size:</span><span
class="formw"><input type="text" size="25" /></span>
</div>
<div class="row">
<span class="label">Comments:</span><span
class="formw">
<textarea cols="25" rows="8">
Go ahead - write something...
</textarea>
</span>
</div>
<div class="spacer">
</div>
</form>
</div>
Es esto lo que estás buscando?
body {
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}
#framecontent {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 200px;
/*Width of frame div*/
height: 100%;
overflow: hidden;
/*Disable scrollbars. Set to "scroll" to enable*/
background: navy;
color: white;
}
#maincontent {
position: fixed;
top: 0;
left: 200px;
/*Set left value to WidthOfFrameDiv*/
right: 0;
bottom: 0;
overflow: auto;
background: #fff;
}
.innertube {
margin: 15px;
/*Margins for inner DIV inside each DIV (to provide padding)*/
}
* html body {
/*IE6 hack*/
padding: 0 0 0 200px;
/*Set value to (0 0 0 WidthOfFrameDiv)*/
}
* html #maincontent {
/*IE6 hack*/
height: 100%;
width: 100%;
}
<div id="framecontent">
<div class="innertube">
<h1>CSS Left Frame Layout</h1>
<h3>Sample text here</h3>
</div>
</div>
<div id="maincontent">
<div class="innertube">
<h1>Dynamic Drive CSS Library</h1>
<p style="text-align: center">Credits: <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a>
</p>
</div>
</div>
Siento tu dolor, pero trata de no mirarlo como el tiempo perdido. Estoy seguro de que tiene una comprensión mucho mejor de CSS de lo que hacía antes. Sigue trabajando con eso y comenzarás a ver las ventajas. Personalmente, he encontrado que CSS es una de esas cosas que requiere mucha práctica para ser competente. He estado utilizando diseños basados en CSS durante 5 años y todavía estoy aprendiendo trucos interesantes todos los días.