Javascript 在特定的<；td>；表中的元素

我在一个主表中有两个html表。我必须给出第一个表的td之间的空间，以便标题1应位于元素1和文本框的顶部，标题2应位于元素2的顶部，并选择其他表中可用的列表。请建议我如何实现这一点，我是否需要修改html表结构。 请找到小提琴：

以下是css代码：

td:nth-child(1) {
    padding-right: 90px;
}

HTML代码：

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

标题一
标题二
要素1：
要素2：
AAA
BB
CCC
FF
游戏打得好
BHH

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

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

标题一
标题二
标题三
要素1：
要素2：
AAA
BB
CCC
FF
游戏打得好
BHH

---

我建议将所有内容放在一张表中。当您有两个单独的表，但希望列对齐时，您会发现几乎不可能确保它们始终对齐（特别是当用户调整浏览器窗口的大小时）。还可以添加和标记以区分标题行和正文行。此外，由于第二个表中有3列，您需要使用标题第二列的

colspan

属性来告诉它跨2列，从而允许列适合（或者，如果我不理解您想要的对齐方式，您可能需要在第一个标题列上安装

colspan

）

标题一
标题二
要素1：
要素2：
AAA
BB
CCC
FF
游戏打得好
BHH

我会将两个表合并为一个表，其中包含

colspan

值

另一个更正，应该是

valign=“middle”

而不是

center

.hone、.htwo{
背景色：#EEEEEE；
字体大小：粗体；
颜色：红色；
字体大小：12px；
高度：15px；
}
运输署{
边框：1px纯银；
}
运输署：第n名儿童（2）{
边界：0；
宽度：80px；
}
td选择{
垂直对齐：顶部；
}

标题一
标题二
要素1：
要素2：
AAA
BB
CCC
FF
游戏打得好
BHH

您可以使用一个表结构，其外观如下所示：

标题1
标题2
要素1
要素2
AAA
BB
CCC
FF
游戏打得好
BHH

您需要更改其中一个表的边距，我建议您签出此选项您是否使用表来构建页面结构？考虑移动到divs。这将更容易在页面上定位和分隔项目OK。我们不能使用表格来实现这一点吗？为什么要使用一些表格？为什么要使用这种面向表格的结构？有什么特别的原因吗？你应该使用div-base结构吗？但是你已经删除了标题背景色的CSS，当保持不变时，问题仍然是一样的，请检查fiddle@James Wilkins。如果使用html表很难实现，有人建议使用div标记吗。感谢并感谢您的时间。我正在看您发布的代码，它有

填充权：90px；我觉得剩下的很明显。好吧，我添加了CSS。这并不复杂很抱歉，这里提到的任何解决方案在标题的背景色下都不起作用。有人能提出真正的解决办法吗。我可以使用div或html表。谢谢你的建议。
 <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>

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