HTML - dwa stoły obok siebie na boku

To znowu ja. Staram się ustawiać stoły obok siebie w poziomie, ale to właśnie dostałem. Nie jestem pewien, dlaczego kod nie jest wcięty ?? ... Dzięki enter image description here HTML - dwa stoły obok siebie na boku

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

Źródło

2012-01-18 Doc Holiday

Jest to pełny kod? Jeśli tak, musisz dodać '

...

' wokół bloku (to nie rozwiązuje problemu, ale twój kod będzie wyglądał lepiej). –

Jeśli używałeś Yahoo ... spróbuj z Google;) Żart. Ustaw poprawnie swoje floats (float :) i użyj z nim metody pozycjonowania 'position: relative;'. –

dobrze ...ten kod jest dołączany na innej stronie internetowej .... dzięki jednak –

Myślę, że brakuje kilku linijek kodu HTML od początku swojej kopiowania i wklejania, jednak to, co” Będę chciał dodać float:left do CSS pierwszego zestawu pól.

Źródło

2012-01-18 20:56:23 SpoonNZ

Dodaj:

fieldset 
{ 
    float: left; 
}

do swojego CSS. Skopiowałem twój kod HTML do http://jsfiddle.net/S3n6D/ i dodałem ten CSS. Możesz zobaczyć wynik tam.

Źródło

2012-01-18 20:56:52

próbował dodać

wciąż na siebie –

Trzeba zastosować regułę CSS do tabel w celu śledzenia postępów w normalnym dokumencie pływak, który jest:

table{ float:left; }

lub

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

PS: Wystarczy upewnić się, że ten blok selektora znaczników nie wpłynie na żadne inne tabele, które nie są takie, w przeciwnym razie zalecane jest użycie ID lub selektorów klasy.

Źródło

2012-01-18 21:04:17

próbował dodać

wciąż na siebie nawzajem –

Dodanie display: table-cell; do tabel może pomóc. http://www.quirksmode.org/css/display.html Może być konieczne dodanie elementu div do pakowania za pomocą display: table; lub dodanie tej właściwości do elementu w zależności od struktury strony.

Źródło

2012-01-19 13:55:04

ok ... dasz temu spróbować..dzięki –

nie wydaje się pomóc ... to jest frustrujące –

spróbuj' display : inline-block; '. często po prostu działa idealnie – 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>

Źródło

2014-01-10 16:32:23 user3146843

Ta odpowiedź jest pobierana z Chris Baker answer duplikatu pytanie. Proszę zagłosować na swoją odpowiedź.

Można użyć float: left lub display: inline-block w zależności od zawartości i przestrzeni:

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

<table style="float: left">

Ta strona jest już setup z HTML wypróbować i zobaczyć, jak to wygląda w przeglądarce: http://jsfiddle.net/SM769/

Dokumentacji

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

Przykład

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

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

Źródło

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>

Źródło

2015-09-16 06:44:15

HTML - dwa stoły obok siebie na boku

Odpowiedz

Powiązane problemy