HTML - Dos tablas horizontalmente una al lado de la otra

Soy yo de nuevo. Estoy tratando de juntar tablas una junto a la otra horizontalmente, pero esto es lo que obtuve. No estoy seguro de por qué el código no tiene sangría ?? ... Gracias enter image description here HTML - Dos tablas horizontalmente una al lado de la otra

<tr> 
<th> 
     <span onclick="toggleDiv('favData', 'favDataImg')" style="cursor: hand;">Favorites <img name="favDataImg" src="../images/minus.gif" /></span> 
</th> 
</tr> 
<tr> 
    <td style="width: 300px; text-align: left; padding-right: 30px;"> 
<div id="favData" style="display: block;"> 
<fieldset style="width: 240px;"> 
<legend>Favorites</legend> 
<table border="0" align="left"> 

<input type="radio" name="publicRadio" value="Public" >Public: </input> 

<select name="publicDropDown"> 
<option value="Public Dropdown" selected="selected">Public Dropdown</option> 
</select> 

<br><br> 
<input type="radio" name="userRadio" value="User" >User: </input> 

<select name="userDropDown"> 
<option value="User Dropdown" selected="selected">User Dropdown</option> 
</select> 

<br><br> 
<input type="radio" name="customRadio" value="Custom" >Custom: </input> 

</table> 
</fieldset> 


<fieldset style="width: 240px;"> 
<legend>Favorites</legend> 
<table border="0" align="left"> 

<input type="radio" name="publicRadio" value="Public" >Public: </input> 

<select name="publicDropDown"> 
<option value="Public Dropdown" selected="selected">Public Dropdown</option> 
</select> 

<br><br> 
<input type="radio" name="userRadio" value="User" >User: </input> 

<select name="userDropDown"> 
<option value="User Dropdown" selected="selected">User Dropdown</option> 
</select> 

<br><br> 
<input type="radio" name="customRadio" value="Custom" >Custom: </input> 

</table> 
</fieldset> 



</div> 
</td> 
</tr>

Fuente

2012-01-18 Doc Holiday

Esta es su código completo? En caso afirmativo, debe agregar '

...

' alrededor del bloque (no soluciona el problema, pero su código se verá mejor). –

Si usó Yahoo ... intente con Google;) Broma. Establezca sus flotadores (float :) correctamente y use con él un método de posicionamiento 'position: relative;'. –

bien ...este código es una inclusión en otra página web ... aunque –

Creo que se está perdiendo unas pocas líneas de HTML desde el inicio de su copiar y pegar, sin embargo lo que' Lo que quiero hacer es agregar un float:left al CSS del primer fieldset.

Fuente

2012-01-18 20:56:23 SpoonNZ

Añadir:

fieldset 
{ 
    float: left; 
}

a su CSS. Copié tu HTML al http://jsfiddle.net/S3n6D/ y agregué ese CSS. Puedes ver el resultado allí.

Fuente

2012-01-18 20:56:52

intenté agregar

todavía en la parte superior –

Usted tiene que aplicar una regla CSS a las tablas con el fin de seguir el flotador documento normal que es:

table{ float:left; }

<table style="float: left;">.........</table>

PD: Sólo asegúrese de que este bloque de selector de etiquetas no afectará a ninguna otra tabla que no sea así, de lo contrario se recomienda el uso de ID o selectores de clase.

Fuente

2012-01-18 21:04:17

intenté agregar

todavía en la parte superior –

Agregando display: table-cell; a las tablas puede ayudar. http://www.quirksmode.org/css/display.html Y es posible que deba agregar wrapping div con display: table; o agregar esa propiedad a algún elemento según la estructura de su página.

Fuente

2012-01-19 13:55:04

ok ... vamos a intentarlo ... gracias –

no parece ayudar ... esto es frustrante –

try' display : bloque en línea; '. a menudo solo funciona a la perfección – nonchip

<!DOCTYPE html> 

<html> 
<head> 
<title>tables sideXside2</title> 
<style> 

table, td { border-width: 2px; border-style: solid; border-collapse: collapse; padding: 15px; color: #000000; text-align: center; } 

table.pos_fixed1 { position:fixed; top:30px; left:10px; } 

table.pos_fixed2 { position:fixed; top:30px; left:250px; } 

table.pos_fixed3 { position:fixed; top:30px; left:490px; } 

</style> 

</head> 
<body> 

<table summary="" width="10%" class="pos_fixed1"> 
<tr><td>1</td><td>2</td><td>3</td></tr> 
<tr><td>4</td><td>5</td><td>6</td></tr> 
<tr><td>7</td><td>8</td><td>9</td></tr> 
</table> 

<table summary="" width="10%" class="pos_fixed2"> 
<tr><td>A</td><td>B</td><td>C</td></tr> 
<tr><td>D</td><td>E</td><td>F</td></tr> 
<tr><td>G</td><td>H</td><td>I</td></tr> 
</table> 

<table summary="" width="10%" class="pos_fixed3"> 
<tr><td>i</td><td>ii</td><td>iii</td></tr> 
<tr><td>iv</td><td>v</td><td>vi</td></tr> 
<tr><td>vii</td><td>viii</td><td>ix</td></tr> 
</table> 

</body> 
</html>

Fuente

2014-01-10 16:32:23 user3146843

Esta respuesta se toma de Chris Baker answer de una pregunta duplicado. Por favor, vote su respuesta.

Uno puede utilizar float: left o display: inline-block dependiendo del contenido y el espacio:

<table style="display: inline-block"> 

<table style="float: left">

Esta página ya está configurado con el código HTML para probar y ver cómo se ve en el navegador: http://jsfiddle.net/SM769/

Documentación

CSS display el MDN - https://developer.mozilla.org/en/CSS:display
CSS float el MDN - https://developer.mozilla.org/en/CSS/float

Ejemplo

<table style="float: left"> 
    <tr> 
     <td>..</td> 
    </tr> 
</table> 

<table style="float: left"> 
    <tr> 
     <td>..</td> 
    </tr> 
</table>

Fuente

2014-01-22 15:08:18 Nathan

<!DOCTYPE html> 
<html> 
<body> 

<table style="float: left; border-collapse:collapse; " border=\"1px;\" > 
    <tr> 
    <td>Jill</td> 
    <td>Smith</td>  
    <td>50</td> 
    </tr> 
    <tr> 
    <td>Eve</td> 
    <td>Jackson</td>   
    <td>94</td> 
    </tr> 
    <tr> 
    <td>John</td> 
    <td>Doe</td>   
    <td>80</td> 
    </tr> 
</table> 


<table style="border-collapse:collapse; " border=\"1px;\"> 
    <tr> 
    <td>Jill jill</td> 
    <td>Smith</td>  
    <td>50</td> 
    </tr> 
    <tr> 
    <td>Eveeve</td> 
    <td>Jackson</td>   
    <td>94</td> 
    </tr> 
    <tr> 
    <td>Johnjohj</td> 
    <td>Doe</td>   
    <td>80</td> 
    </tr> 
</table> 

</body> 
</html>

Fuente

2015-09-16 06:44:15

HTML - Dos tablas horizontalmente una al lado de la otra

Respuesta

Cuestiones relacionadas