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

Я пытаюсь отображать таблицы рядом друг с другом по горизонтали, но это то, что я получаю.
enter image description here

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

Ответы

Ответ 1

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

Ответ 2

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

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

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

<table style="float: left">

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

Документация

пример

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

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

Ответ 3

попробуйте добавить в свой файл css:

.table-wrapper {
    display:inline-flex;
}

Я пробовал использовать "display: inline-table", с "float: left" и другими вещами, но ни один из них не работал для меня. Надеюсь, это сработает для вас!

Ответ 4

Добавить

fieldset
{
    float: left;
}

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

Ответ 5

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

table{ float:left; }

или

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

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

Ответ 6

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

Ответ 7

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

Ответ 8

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

Ответ 9

Чтобы показать две таблицы рядом, вы можете добавить следующий CSS:

table.table1, table.table2{
    width:49.8%;
    display: inline-table;
}