Question

我正试图水平地展示彼此相邻的桌子，但这就是我所得到的 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>

Answer 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 - https://developer.mozilla.org/en/CSS:display
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>

Answer 2

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

Answer 3

尝试添加到您的CSS文件：

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

我尝试使用“ display：inline-table”，“ float：left”和其他东西，但是没有一个适合我。我希望它对您有用！

Answer 4

添加：

fieldset
{
    float: left;
}

到你的CSS。我将您的HTML复制到http://jsfiddle.net/S3n6D/并添加了CSS。你可以在那里看到结果。

Answer 5

您必须将CSS规则应用于表格，以便遵循正常的文档浮点数：

table{ float:left; }

或

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

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

Answer 6

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

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

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

Answer 9

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

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

HTML - 水平并排的两个表

9 个答案: