界面如下
简化的代码如下
<div>
<table border=1>
<tr>
<td> 国家 </td>
<td> 姓名 </td>
<td> 年龄 </td>
</tr>
</table>
<div style="height:300px;width:140px;overflow:auto">
<table border=1>
<tr>
<td>美国</td><td>1111</td><td>222</td>
</tr>
<tr>
<td rowspan=3>中国</td><td>1111</td><td>222</td>
</tr>
<tr>
<td>1111</td><td>222</td>
</tr>
<tr>
<td>1111</td><td>222</td>
</tr>
<tr>
<td>澳大利亚</td><td>1111</td><td>222</td>
</tr>
<tr>
<td rowspan=3>中国</td><td>1111</td><td>222</td>
</tr>
<tr>
<td>1111</td><td>222</td>
</tr>
<tr>
<td>1111</td><td>222</td>
</tr>
<tr>
<td>美国</td><td>1111</td><td>222</td>
</tr>
<tr>
<td rowspan=3>中国</td><td>1111</td><td>222</td>
</tr>
<tr>
<td>1111</td><td>222</td>
</tr>
<tr>
<td>1111</td><td>222</td>
</tr>
<tr>
<td>美国</td><td>1111</td><td>222</td>
</tr>
<tr>
<td rowspan=3>中国</td><td>1111</td><td>222</td>
</tr>
<tr>
<td>1111</td><td>222</td>
</tr>
<tr>
<td>1111</td><td>222</td>
</tr>
</table>
</div>
</div>
我希望 上下两个table的列 能够对其，我尝试过给每个列都定死一个width，但是发现
当列多的时候这样做并不好使
因为如果table的内容太多对界面的排版和可看性都不好，所以我想要一个 超出高度自动出现滚动条的样子
有的朋友说，你直接把table 放div里面就行了啊
这样又会有一个问题，因为数据很多，下拉看的时候，就会看不到每一列的标题，
比如说每行的数据分别是各个学科的分数，如果这样的的话，下拉着看的时候，就不知道哪个分数对应的是哪一个学科
所以每一列的标题单独出来，内容要使用下拉框（先不考虑分页）
这样我就遇到一个问题，列的标题和内容因为是两个table ，造成了内容的对不齐
请大神帮帮我
（原本 bootstrap的table的ui有类似的，但是并不适用于我这种 有 rowspan或者colspan的情况，不得已我只好自己写）
bootstrap的table的UI插件
<div>
<table border=1 width="140">
<colgroup>
<col width="30%"/>
<col width="30%"/>
<col width="40%"/>
</colgroup>
<tr>
<td> 国家 </td>
<td> 姓名 </td>
<td> 年龄 </td>
</tr>
</table>
<div style="height:300px;width:157px;overflow:auto">
<table border=1 width="140">
<colgroup>
<col width="30%"/>
<col width="30%"/>
<col width="40%"/>
</colgroup>
<tr>
<td>美国</td><td>1111</td><td>222</td>
</tr>
<tr>
<td rowspan=3>中国</td><td>1111</td><td>222</td>
</tr>
<tr>
<td>1111</td><td>222</td>
</tr>
<tr>
<td>1111</td><td>222</td>
</tr>
<tr>
<td>澳大利亚</td><td>1111</td><td>222</td>
</tr>
<tr>
<td rowspan=3>中国</td><td>1111</td><td>222</td>
</tr>
<tr>
<td>1111</td><td>222</td>
</tr>
<tr>
<td>1111</td><td>222</td>
</tr>
<tr>
<td>美国</td><td>1111</td><td>222</td>
</tr>
<tr>
<td rowspan=3>中国</td><td>1111</td><td>222</td>
</tr>
<tr>
<td>1111</td><td>222</td>
</tr>
<tr>
<td>1111</td><td>222</td>
</tr>
<tr>
<td>美国</td><td>1111</td><td>222</td>
</tr>
<tr>
<td rowspan=3>中国</td><td>1111</td><td>222</td>
</tr>
<tr>
<td>1111</td><td>222</td>
</tr>
<tr>
<td>1111</td><td>222</td>
</tr>
</table>
</div>
</div>
为什么要两个table，第一个不就是表头吗？就像这样
<table width="300" border="1" cellspacing="0">
<tr>
<th>班级</th>
<th>日期</th>
<th>标题</th>
</tr>
<tr>
<td>一班</td>
<td>2012-5-10</td>
<td>标题1</td>
</tr>
<tr>
<td>二班</td>
<td>2012-5-20</td>
<td>标题2</td>
</tr>
</table>
因为如果table的内容太多对界面的排版和可看性都不好，所以我想要一个 超出高度自动出现滚动条的样子
<div style="height:300px;width:140px;overflow:auto">
<table border=1>
<tr>
<th> 国家 </th>
<th> 姓名 </th>
<th> 年龄 </th>
</tr>
<tr>
<td>美国</td><td>1111</td><td>222</td>
</tr>
<tr>
<td rowspan=3>中国</td><td>1111</td><td>222</td>
</tr>
<tr>
<td>1111</td><td>222</td>
</tr>
<tr>
<td>1111</td><td>222</td>
</tr>
<tr>
<td>澳大利亚</td><td>1111</td><td>222</td>
</tr>
<tr>
<td rowspan=3>中国</td><td>1111</td><td>222</td>
</tr>
<tr>
<td>1111</td><td>222</td>
</tr>
<tr>
<td>1111</td><td>222</td>
</tr>
<tr>
<td>美国</td><td>1111</td><td>222</td>
</tr>
<tr>
<td rowspan=3>中国</td><td>1111</td><td>222</td>
</tr>
<tr>
<td>1111</td><td>222</td>
</tr>
<tr>
<td>1111</td><td>222</td>
</tr>
<tr>
<td>美国</td><td>1111</td><td>222</td>
</tr>
<tr>
<td rowspan=3>中国</td><td>1111</td><td>222</td>
</tr>
<tr>
<td>1111</td><td>222</td>
</tr>
<tr>
<td>1111</td><td>222</td>
</tr>
</table>
</div>