Tabla css
Hola experto estoy un poco atascado con unas tablas css, ojala me puedas ayudar
Lo que quiero hacer básicamente es una tabla de 2 columnas por 4 filas
La primera fila es del ancho de la tabla (esta parte me sale bien)
El problema viene con la fila dos en adelante
Ya que la columna de la izquierda la quiero con un ancho especifico (en este caso 180px) y la columna de la derecha que sea del retso del ancho de la tabla ne este caso 850
El problema esta radicando que la columande la izquierda queda de un tamana definido y lo que quiero es que se vea del mismo ancho que tiene la columna de la derecha.
Bueno ojala me hayas entendido, te pego el código ya que de pronto así es más fácil de visualizarlo, gracias
css
#tabla{ width: 850px; height:auto; border: 2px solid #000; margin:0 auto; /*padding:5px 5px 5px 5 px;*/}
#titulo { width: 838px; border: 1px solid #000;padding: 5px; background: #F1F1F1}
#subtabla { width:800px; height:auto;display:inline; }
#subtablatitulo { float:left;width: 180px; border: 1px solid #000;padding: 5px;}
#subtablacontenido {width: 510px;border: 1px solid #000;padding: 5px; clear:both; margin: 0px 200px;}
#tabla{ width: 850px; height:auto; border: 2px solid #000; margin:0 auto; /*padding:5px 5px 5px 5 px;*/}#titulo { width: 838px; border: 1px solid #000;padding: 5px; background: #F1F1F1}#subtabla { width:800px; height:auto;display:inline; }#subtablatitulo { float:left;width: 180px; border: 1px solid #000;padding: 5px;}#subtablacontenido {width: 510px;border: 1px solid #000;padding: 5px; clear:both; margin: 0px 200px;}
codigo html
<div id='tabla'>
<div id='titulo'>
<h1>Brief Description:</h1>
</div>
<div id='subtabla'>
<div id='subtablatitulo'>
<b>Tour:</b> <br>
</div>
<div id='subtablacontenido'>
$b
</div>
</div>
<div id='subtabla'>
<div id='subtablatitulo'>
<b>Brief description:</b><br>
</div>
<div id='subtablacontenido'>
$g<br>
</div>
</div>
<div id='subtabla'>
<div id='subtablatitulo'>
<b>Price:</b><br>
</div>
<div id='subtablacontenido'>
$ $e<br>
</div>
</div>
<div id='tabla'>
<div id='titulo'>
<h1>Brief Description:</h1>
</div>
<div id='subtabla'>
<div id='subtablatitulo'><b>Tour:</b> <br></div>
<div id='subtablacontenido'>$b</div>
</div>
<div id='subtabla'>
<div id='subtablatitulo'><b>Brief description:</b><br></div>
<div id='subtablacontenido'>$g<br></div>
</div>
<div id='subtabla'>
<div id='subtablatitulo'><b>Price:</b><br></div>
<div id='subtablacontenido'>$ $e<br> </div>
</div>
Lo que quiero hacer básicamente es una tabla de 2 columnas por 4 filas
La primera fila es del ancho de la tabla (esta parte me sale bien)
El problema viene con la fila dos en adelante
Ya que la columna de la izquierda la quiero con un ancho especifico (en este caso 180px) y la columna de la derecha que sea del retso del ancho de la tabla ne este caso 850
El problema esta radicando que la columande la izquierda queda de un tamana definido y lo que quiero es que se vea del mismo ancho que tiene la columna de la derecha.
Bueno ojala me hayas entendido, te pego el código ya que de pronto así es más fácil de visualizarlo, gracias
css
#tabla{ width: 850px; height:auto; border: 2px solid #000; margin:0 auto; /*padding:5px 5px 5px 5 px;*/}
#titulo { width: 838px; border: 1px solid #000;padding: 5px; background: #F1F1F1}
#subtabla { width:800px; height:auto;display:inline; }
#subtablatitulo { float:left;width: 180px; border: 1px solid #000;padding: 5px;}
#subtablacontenido {width: 510px;border: 1px solid #000;padding: 5px; clear:both; margin: 0px 200px;}
#tabla{ width: 850px; height:auto; border: 2px solid #000; margin:0 auto; /*padding:5px 5px 5px 5 px;*/}#titulo { width: 838px; border: 1px solid #000;padding: 5px; background: #F1F1F1}#subtabla { width:800px; height:auto;display:inline; }#subtablatitulo { float:left;width: 180px; border: 1px solid #000;padding: 5px;}#subtablacontenido {width: 510px;border: 1px solid #000;padding: 5px; clear:both; margin: 0px 200px;}
codigo html
<div id='tabla'>
<div id='titulo'>
<h1>Brief Description:</h1>
</div>
<div id='subtabla'>
<div id='subtablatitulo'>
<b>Tour:</b> <br>
</div>
<div id='subtablacontenido'>
$b
</div>
</div>
<div id='subtabla'>
<div id='subtablatitulo'>
<b>Brief description:</b><br>
</div>
<div id='subtablacontenido'>
$g<br>
</div>
</div>
<div id='subtabla'>
<div id='subtablatitulo'>
<b>Price:</b><br>
</div>
<div id='subtablacontenido'>
$ $e<br>
</div>
</div>
<div id='tabla'>
<div id='titulo'>
<h1>Brief Description:</h1>
</div>
<div id='subtabla'>
<div id='subtablatitulo'><b>Tour:</b> <br></div>
<div id='subtablacontenido'>$b</div>
</div>
<div id='subtabla'>
<div id='subtablatitulo'><b>Brief description:</b><br></div>
<div id='subtablacontenido'>$g<br></div>
</div>
<div id='subtabla'>
<div id='subtablatitulo'><b>Price:</b><br></div>
<div id='subtablacontenido'>$ $e<br> </div>
</div>
Respuesta de ditman
1