HTML - Due tabelle orizzontalmente affiancate

Sono di nuovo io. Sto cercando di ottenere i tavoli uno accanto all'altro in orizzontale, ma questo è quello che ho ottenuto. Io non so perché il codice non è rientrato ?? ... Grazie enter image description here HTML - Due tabelle orizzontalmente affiancate

<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>

fonte

2012-01-18 Doc Holiday

È questo il tuo codice completo? Se sì, devi aggiungere '

...

' attorno al blocco (non risolve il problema, ma il tuo codice sembrerà migliore). –

Se hai usato Yahoo ... prova con Google;) Joke. Imposta i float (float :) correttamente e usa con esso un metodo di posizionamento 'position: relativo;'. –

beh ...questo codice è un include su un'altra pagina Web .... grazie –

penso che ti manca un paio di righe di codice HTML fin dall'inizio della vostra copia e incolla, ma ciò che si' Voglio fare è aggiungere un float:left al CSS del primo fieldset.

fonte

2012-01-18 20:56:23 SpoonNZ

Add:

fieldset 
{ 
    float: left; 
}

al vostro CSS. Ho copiato il tuo codice HTML in http://jsfiddle.net/S3n6D/ e aggiunto quello CSS. Puoi vedere il risultato lì.

fonte

2012-01-18 20:56:52

provato ad aggiungere

ancora uno sopra l'altro –

Si deve applicare una regola CSS per le tabelle al fine di seguire il galleggiante documento normale che è:

table{ float:left; }

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

PS: Basta fare in modo che questo selettore di tag non avrà effetto su nessun'altra tabella che tu non sia, altrimenti ti consigliamo di usare selettori di ID o di classe.

fonte

2012-01-18 21:04:17

provato ad aggiungere

ancora uno sopra l'altro –

L'aggiunta di display: table-cell; ai tavoli può essere d'aiuto. http://www.quirksmode.org/css/display.html E potrebbe essere necessario aggiungere div wrapping con display: table; o aggiungere tale proprietà a qualche elemento in base alla struttura della pagina.

fonte

2012-01-19 13:55:04

ok ... andando a dare che un try..thanks –

non sembra aiutare ... questo è frustrante –

try' display : inline-block; '. spesso funziona perfettamente – 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>

fonte

2014-01-10 16:32:23 user3146843

Questa risposta è preso da Chris Baker answer di una domanda duplicato. Si prega di votare la sua risposta.

si può usare float: left o display: inline-block a seconda del contenuto e lo spazio:

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

<table style="float: left">

Questa pagina è già configurato con il codice HTML per provare e vedere come appare nel browser: http://jsfiddle.net/SM769/

Documentazione

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

Esempio

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

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

fonte

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>

fonte

2015-09-16 06:44:15

HTML - Due tabelle orizzontalmente affiancate

risposta

Problemi correlati