我正在尝试水平并排显示表格,但这就是我得到的结果。
<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>
最佳答案
此答案摘自 Chris Baker 的 answer一个重复的问题。请投票给他的答案。
根据内容和空间,可以使用float: left
或display: inline-block
:
<table style="display: inline-block">
<table style="float: left">
此页面已使用 HTML 进行设置以试用并查看其在浏览器中的外观:http://jsfiddle.net/SM769/
文档
-
MDN 上的
- CSS
显示
- 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>
关于HTML — 两个水平并排的表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8917235/