Foros del Web » Creando para Internet » CSS »

Alinear 2 tablas en la misma línea

 Estas en el tema de Alinear 2 tablas en la misma línea en el foro de CSS en Foros del Web. Hola muy buenas, estoy intentando que el css coloque 2 tablas en la misma línea, una con el 70% a la izquierda y otra con ...
  #1 (permalink)  
Antiguo 30/09/2011, 14:12
 
Fecha de Ingreso: abril-2006
Mensajes: 105
Antigüedad: 18 años, 6 meses
Puntos: 11
Alinear 2 tablas en la misma línea
Hola muy buenas, estoy intentando que el css coloque 2 tablas en la misma línea, una con el 70% a la izquierda y otra con el 20% del ancho total de la página a la derecha.

El problema es que la 2º siempre queda debajo...

Este es el codigo css:

CSS del div que contiene los 2 div, con sus respectivas tablas:

Código: 
#anchotabla {
	width:100%;
}
CSS de la tabla izquierda:

Código: 
.table2 {
PADDING-BOTTOM: 2px; BACKGROUND: url('../images/content/table-bg.gif') no-repeat 50% 100%; 
}
.table2 TABLE {
	WIDTH: 70%; TABLE-LAYOUT: auto
}
.table2 THEAD TH {
	padding:0px; border-bottom:1px solid #1a0f08; background:#4d1a08 url('../images/content/table-header.gif') repeat-x 0px 100%; 
}
.table2 THEAD TH {
	COLOR: #f5ebd1; FONT-WEIGHT: bold
}
.table2 THEAD TH A {
	COLOR: #f5ebd1; FONT-WEIGHT: bold
}
.table2 THEAD TH.align-center .sort-tab {
	TEXT-ALIGN: center
}
.table2 THEAD TH.align-center .sort-link {
	TEXT-ALIGN: center
}
.table2 TFOOT TH {
	PADDING-BOTTOM: 10px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; PADDING-TOP: 10px
}
.table2 TBODY TD {
	PADDING-BOTTOM: 10px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; COLOR: #f5ebd1; PADDING-TOP: 10px
}
.table2 TBODY .row1 TD {
	BACKGROUND: #2b1507; BORDER-TOP: #31190a 1px solid
}
.table2 TBODY .row2 TD {
	BACKGROUND: #231207; BORDER-TOP: #30190b 1px solid
}
.table2 TBODY TR:hover TD {
	BORDER-TOP-COLOR: #0f0702; BACKGROUND: #180c04; COLOR: #fff
}
.table2 TBODY TR.row-active TD {
	BORDER-TOP-COLOR: #0f0702; BACKGROUND: #180c04; COLOR: #fff
}
.table2 TBODY TR.no-results TD {
	TEXT-ALIGN: center; PADDING-BOTTOM: 25px; PADDING-LEFT: 50px; PADDING-RIGHT: 50px; BACKGROUND: #231207; COLOR: #c09a67; PADDING-TOP: 25px
}
.table2.full-width TD:first-child {
	PADDING-LEFT: 20px
}
.table2 DL {
	PADDING-BOTTOM: 0px; LINE-HEIGHT: 38px; BACKGROUND-COLOR: #231207; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; HEIGHT: 38px; CLEAR: both; PADDING-TOP: 0px
}
.table2 DT {
	DISPLAY: inline-block; FLOAT: left
}
.table2 DD {
	DISPLAY: inline-block; FLOAT: right; COLOR: #fefffe
}
.table2 H4 {
	BORDER-LEFT: 1px solid #7c2804; PADDING-BOTTOM: 6px; PADDING-LEFT: 8px; PADDING-RIGHT: 8px; BACKGROUND: #4d1a08 url('../images/content/table-header.gif') repeat-x 0px 100%; COLOR: #fff; BORDER-TOP: 1px solid #7c2804; PADDING-TOP: 6px
}
.table2 LI {
	PADDING-BOTTOM: 4px; LINE-HEIGHT: 27px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; BACKGROUND: #231207; HEIGHT: 27px; CLEAR: both; BORDER-TOP: #30190b 1px solid; PADDING-TOP: 4px
}
.table2 DL.odd {
	BACKGROUND: #2b1507; BORDER-TOP: #31190a 1px solid
}
.table2 DL:hover {
	BORDER-TOP-COLOR: #0f0702; BACKGROUND: #180c04
}
.table2 .sort-link {
	TEXT-ALIGN: left; BORDER-LEFT: #7c2804 1px solid; PADDING-BOTTOM: 8px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; DISPLAY: block; BORDER-TOP: #7c2804 1px solid; BORDER-RIGHT: #391303 1px solid; PADDING-TOP: 8px
}
.table2 .sort-tab {
	TEXT-ALIGN: left; BORDER-LEFT: #7c2804 1px solid; PADDING-BOTTOM: 8px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; DISPLAY: block; BORDER-TOP: #7c2804 1px solid; BORDER-RIGHT: #391303 1px solid; PADDING-TOP: 8px
}
.table2 .sort-link:hover {
	BORDER-TOP-COLOR: #af3900; BACKGROUND: #6a240b url('../images/content/table-header-hover.gif') repeat-x 0px 100%; COLOR: #fff; BORDER-LEFT-COLOR: #af3900
}
.table2 .sort-link .arrow {
	PADDING-LEFT: 10px; BACKGROUND: url('../images/content/table-sort-arrows.gif') no-repeat 0px -10px; 
}
.table2 .sort-link:hover .arrow {
	BACKGROUND-POSITION: 0px -115px
}
.table2 .sort-link .arrow.up {
	BACKGROUND-POSITION: 0px -80px
}
.table2 .sort-link:hover .arrow.up {
	BACKGROUND-POSITION: 0px -80px
}
.table2 .sort-link .arrow.down {
	BACKGROUND-POSITION: 0px -45px
}
.table2 .sort-link:hover .arrow.down {
	BACKGROUND-POSITION: 0px -45px
}
.table2 .sort-data.hidden {
	DISPLAY: none
}
CSS de la tabla derecha:

Código: 
#tabladerecha {
POSITION: relative; FLOAT: right; PADDING-RIGHT: 0px; DISPLAY: inline-block; PADDING-TOP: 0px;
}

.table3 {
PADDING-TOP: 0px; PADDING-BOTTOM: 2px; BACKGROUND: url('../images/content/table-bg.gif') no-repeat 50% 100%; 
}
.table3 TABLE {
	WIDTH: 20%; TABLE-LAYOUT: auto
}
.table3 THEAD TH {
	padding:0px; border-bottom:1px solid #1a0f08; background:#4d1a08 url('../images/content/table-header.gif') repeat-x 0px 100%; 
}
.table3 THEAD TH {
	COLOR: #f5ebd1; FONT-WEIGHT: bold
}
.table3 THEAD TH A {
	COLOR: #f5ebd1; FONT-WEIGHT: bold
}
.table3 THEAD TH.align-center .sort-tab {
	TEXT-ALIGN: center
}
.table3 THEAD TH.align-center .sort-link {
	TEXT-ALIGN: center
}
.table3 TFOOT TH {
	PADDING-BOTTOM: 10px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; PADDING-TOP: 10px
}
.table3 TBODY TD {
	PADDING-BOTTOM: 10px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; COLOR: #f5ebd1; PADDING-TOP: 10px
}
.table3 TBODY .row1 TD {
	BACKGROUND: #2b1507; BORDER-TOP: #31190a 1px solid
}
.table3 TBODY .row2 TD {
	BACKGROUND: #231207; BORDER-TOP: #30190b 1px solid
}
.table3 TBODY TR:hover TD {
	BORDER-TOP-COLOR: #0f0702; BACKGROUND: #180c04; COLOR: #fff
}
.table3 TBODY TR.row-active TD {
	BORDER-TOP-COLOR: #0f0702; BACKGROUND: #180c04; COLOR: #fff
}
.table3 TBODY TR.no-results TD {
	TEXT-ALIGN: center; PADDING-BOTTOM: 25px; PADDING-LEFT: 50px; PADDING-RIGHT: 50px; BACKGROUND: #231207; COLOR: #c09a67; PADDING-TOP: 25px
}
.table3.full-width TD:first-child {
	PADDING-LEFT: 20px
}
.table3 DL {
	PADDING-BOTTOM: 0px; LINE-HEIGHT: 38px; BACKGROUND-COLOR: #231207; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; HEIGHT: 38px; CLEAR: both; PADDING-TOP: 0px
}
.table3 DT {
	DISPLAY: inline-block; FLOAT: left
}
.table3 DD {
	DISPLAY: inline-block; FLOAT: right; COLOR: #fefffe
}
.table3 H4 {
	BORDER-LEFT: 1px solid #7c2804; PADDING-BOTTOM: 6px; PADDING-LEFT: 8px; PADDING-RIGHT: 8px; BACKGROUND: #4d1a08 url('../images/content/table-header.gif') repeat-x 0px 100%; COLOR: #fff; BORDER-TOP: 1px solid #7c2804; PADDING-TOP: 6px
}
.table3 LI {
	PADDING-BOTTOM: 4px; LINE-HEIGHT: 27px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; BACKGROUND: #231207; HEIGHT: 27px; CLEAR: both; BORDER-TOP: #30190b 1px solid; PADDING-TOP: 4px
}
.table3 DL.odd {
	BACKGROUND: #2b1507; BORDER-TOP: #31190a 1px solid
}
.table3 DL:hover {
	BORDER-TOP-COLOR: #0f0702; BACKGROUND: #180c04
}
.table3 .sort-link {
	TEXT-ALIGN: left; BORDER-LEFT: #7c2804 1px solid; PADDING-BOTTOM: 8px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; DISPLAY: block; BORDER-TOP: #7c2804 1px solid; BORDER-RIGHT: #391303 1px solid; PADDING-TOP: 8px
}
.table3 .sort-tab {
	TEXT-ALIGN: left; BORDER-LEFT: #7c2804 1px solid; PADDING-BOTTOM: 8px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; DISPLAY: block; BORDER-TOP: #7c2804 1px solid; BORDER-RIGHT: #391303 1px solid; PADDING-TOP: 8px
}
.table3 .sort-link:hover {
	BORDER-TOP-COLOR: #af3900; BACKGROUND: #6a240b url('../images/content/table-header-hover.gif') repeat-x 0px 100%; COLOR: #fff; BORDER-LEFT-COLOR: #af3900
}
.table3 .sort-link .arrow {
	PADDING-LEFT: 10px; BACKGROUND: url('../images/content/table-sort-arrows.gif') no-repeat 0px -10px; 
}
.table3 .sort-link:hover .arrow {
	BACKGROUND-POSITION: 0px -115px
}
.table3 .sort-link .arrow.up {
	BACKGROUND-POSITION: 0px -80px
}
.table3 .sort-link:hover .arrow.up {
	BACKGROUND-POSITION: 0px -80px
}
.table3 .sort-link .arrow.down {
	BACKGROUND-POSITION: 0px -45px
}
.table3 .sort-link:hover .arrow.down {
	BACKGROUND-POSITION: 0px -45px
}
.table3 .sort-data.hidden {
	DISPLAY: none
}
Este es el html:

Código HTML:
<div id="anchotabla"><div class="table2 full-width">
		<table>
				<thead>
					<tr>
														<th width="35%" align="left">
										<a href="javascript:;" class="sort-link default">
		<span class="arrow up">Cabecera dato1</span> </a> </th>
							
														<th width="30%" align="center">
										<a href="javascript:;" class="sort-link default">
		<span class="arrow">Cabecera dato2</span> </a> </th>					
														<th width="15%" align="center">
										<a href="javascript:;" class="sort-link default">
		<span class="arrow">Cabecera dato3</span> </a> </th>
														<th width="20%" align="center">
										<a href="javascript:;" class="sort-link default">
		<span class="arrow">Cabecera dato4</span> </a> </th>
					</tr>
				</thead>
			<tbody>
			
		<tr class="estilo1" style="display: table-row; ">
					<td>

						<a href="url">
						
						<strong class="item-link" data-achievement="4920">

		
							<span>dato1</span>
						</strong>
						
						</a>
						
					</td>
					<td class="align-center">
							dato2
					</td>
					<td class="align-center">
							dato3
					</td>
					<td class="align-center">
							dato4
					</td>
				</tr>
			</tbody>
		</table>
	</div>
	
	<div id="tabladerecha" class="table3 full-width">
		<table>
				<thead>
					<tr>
														<th width="50%" align="left">
										<a href="javascript:;" class="sort-link default">
		<span class="arrow up">Cabecera 2dato1</span> </a> </th>
							
														<th width="50%" align="center">
										<a href="javascript:;" class="sort-link default">
		<span class="arrow">Cabecera 2dato2</span> </a> </th>					
					</tr>
				</thead>
			<tbody>
			
			
		<tr class="estilo1" style="display: table-row; ">
					<td>

						<a href="url">
						
						<strong class="item-link" data-achievement="4920">

		
							<span>2dato1</span>
						</strong>
						
						</a>
						
					</td>
					<td class="align-center">
							2dato2
					</td>
				</tr>
			</tbody>
		</table>
	</div>

		<div class="data-options-bottom">





	<div class="table-options data-options ">


			<strong class="results-start"></strong>

	<span class="clear"><!-- --></span> </div>
		</div> </div>
¿Dónde está el error?

Un saludo
Última edición por Malekith; 30/09/2011 a las 14:18
  #2 (permalink)  
Antiguo 01/10/2011, 02:32
 
Fecha de Ingreso: octubre-2010
Ubicación: Madrid
Mensajes: 295
Antigüedad: 14 años, 1 mes
Puntos: 12
Respuesta: Alinear 2 tablas en la misma línea
Por qué no pruebas simplificando un poco y poniendo todo en la misma tabla aunque luego el formato de cada columna sea diferente?? creo que así sería más sencillo y las columnas dentro de la tabla quedarían proporcionales como si fueran dos tablas diferentes. Además también jugarías con el espacio entre ellas.

Creo que podría ser una solución simplificada y así no te saldría en ningún caso la segunda tabla debajo.
  #3 (permalink)  
Antiguo 01/10/2011, 05:44
Avatar de IsaBelM
Colaborador
  
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 5 meses
Puntos: 1012
Respuesta: Alinear 2 tablas en la misma línea
la estructura simplificada sería esta
Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="application/xhtml; charset=utf-8" />
<title></title>

<style type="text/css">
#anchotabla {
width:100%;
}

#izq, #der {
float: left;
}

#izq {
margin-right: 20px;
}
</style>

</head>

<body>
<div id="anchotabla">

<div id="izq">
<table border="1px">
<tr>
<td>
dato1
</td>
<td>
dato2
</td>
<td>
dato3
</td>
<td>
dato4
</td>
</tr>

</table>
</div>


<div id="der">
<table border="1px">
<tr>
<td>
dato5
</td>
<td>
dato6
</td>
<td>
dato7
</td>
<td>
dato8
</td>
</tr>

</table>
</div>

</div>

</body>

</html>
aún en lugar de usar divs, puedes usar otra tabla como contenedora

Etiquetas: alinear, ancho, html, tablas, fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 01:32.