HTML - Две таблицы горизонтально Бок о бок

Это я снова. Я пытаюсь получить таблицы рядом друг с другом по горизонтали, но это то, что я получил. Я не знаю, почему код не отступом ?? ... Спасибо enter image description here HTML - Две таблицы горизонтально Бок о бок

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

источник

2012-01-18 Doc Holiday

Является ли это ваш полный код? Если да, вы должны добавить '

...

' вокруг блока (это не проблема, но ваш код будет выглядеть лучше). –

Если вы использовали Yahoo ... попробуйте с Google;) Шутка. Установите свои поплавки (float :) правильно и используйте с ним метод позиционирования 'position: relative;'. –

хорошо ...этот код является добавлением на другую веб-страницу .... спасибо, хотя –

Я думаю, вы пропустили несколько строк HTML с самого начала вашей копии и пасты, однако, что вы» Хотелось бы добавить float:left в CSS первого набора полей.

источник

2012-01-18 20:56:23 SpoonNZ

Добавить:

fieldset 
{ 
    float: left; 
}

к вашему CSS. Я скопировал ваш HTML в http://jsfiddle.net/S3n6D/ и добавил, что CSS. Вы можете увидеть результат там.

источник

2012-01-18 20:56:52

попробовал добавить

все еще сверху друг друга –

Вы должны применить правила CSS к столам, чтобы следовать нормальный документ поплавок, который:

table{ float:left; }

или

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

PS: Просто убедитесь, что этот блок выбора тега не повлияет на другие таблицы, которые вы им не являетесь, в противном случае вам рекомендуется использовать идентификаторы или селектор классов.

источник

2012-01-18 21:04:17

попробовал добавить

все еще на вершине друг друга –

Добавление display: table-cell; к таблицам может помочь. http://www.quirksmode.org/css/display.html И вам может понадобиться добавить wrapping div с display: table; или добавить это свойство к некоторому элементу в зависимости от структуры вашей страницы.

источник

2012-01-19 13:55:04

ok ... собирается попробовать. спасибо –

did'nt, похоже, помогает ... это разочаровывает –

try' display : встроенный блок; '. часто просто отлично работает – 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>

источник

2014-01-10 16:32:23 user3146843

Этот ответ взят из Криса Бейкера answer дубликата вопроса. Пожалуйста, проголосуйте за его ответ.

Можно использовать float: left или display: inline-block в зависимости от содержания и пространства:

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

<table style="float: left">

Эта страница уже установка с HTML, чтобы попробовать и посмотреть, как это выглядит в браузере: http://jsfiddle.net/SM769/

документации

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

Пример

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

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

источник

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>

источник

2015-09-16 06:44:15

HTML - Две таблицы горизонтально Бок о бок

ответ

Смежные вопросы