Question

我在主表中有两个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="#">&gt;&gt;</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>

Answer 1

更好的方法（如果坚持使用表格）是使用单个表格：

<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="#">&gt;&gt;</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>

https://jsfiddle.net/rcj1xgur/3/

Answer 2

我建议把所有东西都放在一张桌子里。当你有两个单独的表，但是你想让列对齐时，你会发现它几乎不可能确保它们总是这样（特别是当用户调整浏览器窗口大小时）。您还可以添加＆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="#">&gt;&gt;</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>

Answer 3

我会将两个表合并为一个，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; }。

http://jsfiddle.net/w8kvm0d9/

＆＃13;

<table>
    <tr>
        <td class="hone" class="more-padding-on-right">Heading One</td>
        <td>&nbsp;</td>
        <td class="htwo" colspan="3">Heading Two</td>
    </tr>
    <tr>
        <td valign="top">Element1:<input id="myTest" type="text" value=""/></td>
        <td>&nbsp;</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="#">&gt;&gt;</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>

＆＃13;


    columnA   columnB
       1      /Hello/Hai/How
       2      /Hi/Hello/Hey

＆＃13;

Answer 4

你可以使用一个表结构，它看起来像这样：

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;">&gt;&gt;</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>

在表

4 个答案: