Ответ 1
Я думаю, что вам не хватает нескольких строк HTML с самого начала вашей копии и вставки, однако то, что вы хотите сделать, это добавить float:left
в CSS первого набора полей.
Я пытаюсь отображать таблицы рядом друг с другом по горизонтали, но это то, что я получаю.
<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>
Я думаю, что вам не хватает нескольких строк HTML с самого начала вашей копии и вставки, однако то, что вы хотите сделать, это добавить float:left
в CSS первого набора полей.
Этот ответ взят из ответа Криса Бейкера на дубликат вопроса. Пожалуйста, проголосуйте за его ответ.
Можно использовать float: left
или display: inline-block
зависимости от содержимого и пространства:
<table style="display: inline-block">
<table style="float: left">
Эта страница уже настроена с HTML, чтобы попробовать и посмотреть, как она выглядит в браузере: http://jsfiddle.net/SM769/
Документация
display
CSS на MDN - https://developer.mozilla.org/en/CSS:displayfloat
на 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>
попробуйте добавить в свой файл css:
.table-wrapper {
display:inline-flex;
}
Я пробовал использовать "display: inline-table", с "float: left" и другими вещами, но ни один из них не работал для меня. Надеюсь, это сработает для вас!
Добавить
fieldset
{
float: left;
}
для вашего CSS. Я скопировал ваш HTML в http://jsfiddle.net/S3n6D/ и добавил, что CSS. Вы можете увидеть результат там.
Вы должны применить правило CSS к своим таблицам, чтобы следовать нормальному документу float, который:
table{ float:left; }
или
<table style="float: left;">.........</table>
PS: Просто убедитесь, что этот блок выбора тегов не повлияет на другие таблицы, которые вы им не являетесь, в противном случае вам рекомендуется использовать идентификаторы или селектор классов.
Добавление display: table-cell;
к таблицам может помочь.
http://www.quirksmode.org/css/display.html
И вам может потребоваться добавить wrapping div с помощью display: table;
или добавить это свойство к некоторому элементу в зависимости от структуры вашей страницы.
<!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>
<!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>
Чтобы показать две таблицы рядом, вы можете добавить следующий CSS:
table.table1, table.table2{
width:49.8%;
display: inline-table;
}