我在主表中有两个html表。我必须在第一个表的td之间给出空格，以便标题一个应该位于Element1和文本框之上，标题二应该位于Element2之上并选择其他表中可用的列表。请建议我如何实现这一点，我是否需要修改html表结构。 请找小提琴：https://jsfiddle.net/x5tLdbz4/1/
以下是css代码：
td:nth-child(1) {
padding-right: 90px;
}
HTML code：
<table>
<table>
<tr>
<td class="hone" class="more-padding-on-right">
Heading One
</td>
<td class="htwo">
Heading Two
</td>
</tr>
</table>
<table>
<tr valign="top">
<td> Element1:<input id="myTest" type="text" value=""> </td>
<td>
Element2:<SELECT id="one" size="10" multiple>
<OPTION value="a">AAA</OPTION>
<OPTION value="b">BB</OPTION>
<OPTION value="c">CCC</OPTION>
</SELECT>
</td>
<td valign="center">
<a href="#">>></a>
</td>
<td>
<SELECT id="two" size="10" multiple>
<OPTION value="a">FF</OPTION>
<OPTION value="b">GG</OPTION>
<OPTION value="c">BHH</OPTION>
</SELECT>
</td>
</tr>
</table>
</table>
答案 0 :(得分：0)
更好的方法（如果坚持使用表格）是使用单个表格：
<table>
<tr>
<td class="hone" class="more-padding-on-right">Heading One</td>
<td class="htwo">Heading Two</td>
<td></td>
<td class="hthree">Heading Three</td>
</tr>
<tr valign="top">
<td>Element1:
<input id="myTest" type="text" value="">
</td>
<td>Element2:
<SELECT id="one" size="10" multiple>
<OPTION value="a">AAA</OPTION>
<OPTION value="b">BB</OPTION>
<OPTION value="c">CCC</OPTION>
</SELECT>
</td>
<td valign="center">
<a href="#">>></a>
</td>
<td>
<SELECT id="two" size="10" multiple>
<OPTION value="a">FF</OPTION>
<OPTION value="b">GG</OPTION>
<OPTION value="c">BHH</OPTION>
</SELECT>
</td>
</tr>
</table>
答案 1 :(得分：0)
我建议把所有东西都放在一张桌子里。当你有两个单独的表，但是你想让列对齐时，你会发现它几乎不可能确保它们总是这样（特别是当用户调整浏览器窗口大小时）。您还可以添加＆lt; thead＆gt;和＆lt; tbody＆gt;用于区分标题行和正文行的标记。此外，由于您在第二个表中有3列，因此您需要使用标题第二列的colspan属性来告知它跨越2列，从而允许列适合in（或者，如果我没有理解你想要的对齐方式，你可能需要在第一个标题列上安装colspan）。
<table>
<thead>
<tr>
<th class="hone" class="more-padding-on-right">
Heading One
</th>
<th class="htwo" colspan="2">
Heading Two
</th>
</tr>
</thead>
<tbody>
<tr valign="top">
<td> Element1:<input id="myTest" type="text" value=""> </td>
<td>
Element2:<SELECT id="one" size="10" multiple>
<OPTION value="a">AAA</OPTION>
<OPTION value="b">BB</OPTION>
<OPTION value="c">CCC</OPTION>
</SELECT>
</td>
<td valign="center">
<a href="#">>></a>
</td>
<td>
<SELECT id="two" size="10" multiple>
<OPTION value="a">FF</OPTION>
<OPTION value="b">GG</OPTION>
<OPTION value="c">BHH</OPTION>
</SELECT>
</td>
</tr>
</tbody>
</table>
答案 2 :(得分：0)
我会将两个表合并为一个，valign="middle"个值。
另一项更正，应为center而不是.hone, .htwo {
background-color: #EEEEEE;
font-weight:bold;
color:red;
font-size:12px;
height:15px;
}
td {
border: 1px solid silver;
}
td:nth-child(2) {
border: 0;
width: 80px;
}
td select {
vertical-align: top;
}。
<table>
<tr>
<td class="hone" class="more-padding-on-right">Heading One</td>
<td> </td>
<td class="htwo" colspan="3">Heading Two</td>
</tr>
<tr>
<td valign="top">Element1:<input id="myTest" type="text" value=""/></td>
<td> </td>
<td valign="top">
Element2:
<SELECT id="one" size="10" multiple>
<OPTION value="a">AAA</OPTION>
<OPTION value="b">BB</OPTION>
<OPTION value="c">CCC</OPTION>
</SELECT>
</td>
<td valign="middle"><a href="#">>></a></td>
<td valign="top">
<SELECT id="two" size="10" multiple>
<OPTION value="a">FF</OPTION>
<OPTION value="b">GG</OPTION>
<OPTION value="c">BHH</OPTION>
</SELECT>
</td>
</tr>
</table>
columnA columnB
1 /Hello/Hai/How
2 /Hi/Hello/Hey
答案 3 :(得分：0)
你可以使用一个表结构，它看起来像这样：
http://jsfiddle.net/swm53ran/267/
<table>
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Element 1<input type="text"/>
</td>
<td>
Element 2
<SELECT id="one" size="10" multiple>
<OPTION value="a">AAA</OPTION>
<OPTION value="b">BB</OPTION>
<OPTION value="c">CCC</OPTION>
</SELECT>
<a href="#" style="vertical-align: top;">>></a>
<SELECT id="two" size="10" multiple>
<OPTION value="a">FF</OPTION>
<OPTION value="b">GG</OPTION>
<OPTION value="c">BHH</OPTION>
</SELECT>
</td>
</tr>
</tbody>
</table>