HTML - 并排水平的两个表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8917235/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML — Two Tables Horizontally Side by Side
提问by Doc Holiday
I'm trying to display tables next to each other horizontally, but this is what I'm getting.
我正在尝试水平显示彼此相邻的表格，但这就是我得到的。
<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>
采纳答案by SpoonNZ
I think you're missing a few lines of HTML from the start of your copy and paste, however what you'll want to do is add a float:leftto the CSS of the first fieldset.
我认为您在复制和粘贴开始时缺少几行 HTML，但是您要做的是将 a 添加float:left到第一个字段集的 CSS。
回答by Nathan
This answer is taken from Chris Baker's answerof a duplicate question. Please up vote his answer.
此答案取自 Chris Baker对重复问题的回答。请投票给他的答案。
One can use float: leftor display: inline-blockdepending on content and space:
可以使用float: left或display: inline-block取决于内容和空间：
<table style="display: inline-block">
<table style="float: left">
This page is already setup with the HTML to try out and see how it looks in the browser: http://jsfiddle.net/SM769/
此页面已经设置了 HTML 以尝试查看它在浏览器中的外观：http: //jsfiddle.net/SM769/
Documentation
文档
- CSS
displayon MDN - https://developer.mozilla.org/en/CSS:display - CSS
floaton MDN - https://developer.mozilla.org/en/CSS/float
displayMDN 上的CSS - https://developer.mozilla.org/en/CSS:displayfloatMDN 上的CSS - https://developer.mozilla.org/en/CSS/float
Example
例子
<table style="float: left">
<tr>
<td>..</td>
</tr>
</table>
<table style="float: left">
<tr>
<td>..</td>
</tr>
</table>
回答by Visovan Mihai
try to add to your CSS file:
尝试添加到您的 CSS 文件中：
.table-wrapper {
display:inline-flex;
}
I have tried with display: inline-table, with float: left, and other stuff, but not a single one worked for me.
我尝试过使用display: inline-table、使用float: left和其他东西，但没有一个对我有用。
回答by Phani CR
<!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>Hymanson</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>Hymanson</td>
<td>94</td>
</tr>
<tr>
<td>Johnjohj</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
回答by Logan Serman
Add:
添加：
fieldset
{
float: left;
}
to your CSS. I copied your HTML to http://jsfiddle.net/S3n6D/and added that CSS. You can see the result there.
到您的 CSS。我将您的 HTML 复制到http://jsfiddle.net/S3n6D/并添加了该 CSS。你可以在那里看到结果。
回答by Ihab Agha
You have to apply a CSS rule to your tables in order to follow the normal document float which is:
您必须对表格应用 CSS 规则才能遵循正常的文档浮动，即：
table{ float:left; }
table{ float:left; }
or
或者
<table style="float: left;">.........</table>
<table style="float: left;">.........</table>
PS: Just make sure that this tag selector block won't affect any other tables that you don't them to be so, otherwise you are recommended to use ID or class selectors.
PS：只要确保这个标签选择器块不会影响你不喜欢的任何其他表，否则建议你使用 ID 或类选择器。
回答by Sergiy T.
Adding display: table-cell;to the tables may help.
http://www.quirksmode.org/css/display.htmlAnd you may need to add wrapping div with display: table;or add that property to some element depending on your page structure.
添加display: table-cell;到表中可能会有所帮助。
http://www.quirksmode.org/css/display.html并且您可能需要display: table;根据您的页面结构添加包装 div或将该属性添加到某些元素。
回答by user3146843
<!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>
回答by Harikrishnan K.N.
To show two tables side by side, you can add the below CSS:
要并排显示两个表，您可以添加以下 CSS：
table.table1, table.table2{
width:49.8%;
display: inline-table;
}
