HTML - 水平并排的两个表格答案

【问题标题】：HTML — Two Tables Horizontally Side by SideHTML - 水平并排的两个表格
【发布时间】：2019-11-05 00:47:28
【问题描述】：

我正在尝试水平并排显示表格，但这就是我得到的。

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

【问题讨论】：

这是您的完整代码吗？如果是，您必须在块周围添加<table>...</table>（它不能解决问题，但您的代码会更好看）。
如果您使用 Yahoo... 尝试使用 Google ;) 笑话。正确设置你的浮点数（float:) 并使用定位方法position:relative;。
好吧...此代码包含在另一个网页上...虽然谢谢

标签： html css

【解决方案1】：

此答案取自 Chris Baker 的 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>

【讨论】：

如果我想在两张桌子之间留一点空间 - 水平或垂直空间取决于第二张桌子是否换行？填充不起作用，因为某些电子邮件客户端会忽略填充。
@user1279887 您可以在上述两个表之间添加第三个表。在<td> 中，您可以输入&nbsp;。确保将border=0 添加到表中以使其不可见。

【解决方案2】：

我认为您在复制和粘贴开始时缺少几行 HTML，但是您需要在第一个字段集的 CSS 中添加 float:left。

【讨论】：

【解决方案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 规则才能遵循正常的文档浮动：

table{ float:left; }

或

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

PS：只要确保这个标签选择器块不会影响任何其他你不想要的表，否则建议你使用 ID 或类选择器。

【讨论】：

尝试添加
仍然在彼此之上

【解决方案6】：

将display: table-cell; 添加到表中可能会有所帮助。 http://www.quirksmode.org/css/display.html 您可能需要使用 display: table; 添加包装 div 或将该属性添加到某些元素，具体取决于您的页面结构。

【讨论】：

似乎没有帮助...这令人沮丧
试试display:inline-block;。通常工作得很好

【解决方案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】：

要并排显示两个表格，您可以添加以下 CSS：

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

【讨论】：

【解决方案9】：

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

【讨论】：