HTML — 两个水平并排的表格

Question

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

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

原文由 Doc Holiday 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我认为您从复制和粘贴的开始就遗漏了几行 HTML，但是您要做的是将 float:left 添加到第一个字段集的 CSS。

原文由 SpoonNZ 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

该答案摘自 Chris Baker 对重复问题的 回答。请投票给他的答案。

可以使用 float: left 或 display: inline-block 取决于内容和空间：

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

<table style="float: left">

此页面已经设置了 HTML 以试用并查看它在浏览器中的外观：http: //jsfiddle.net/SM769/

文档

• MDN 上的 CSS display https://developer.mozilla.org/en/CSS:display
• MDN 上的 CSS float 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>

原文由 Nathan 发布，翻译遵循 CC BY-SA 3.0 许可协议