两个table合并成一个table标题列不滚动（全文）

下面是小编为大家整理的两个table合并成一个table标题列不滚动（全文）,供大家参考。

　原理：

　style="margin-top: -2"避免两个 table 的 border 叠加效果。

　Html 代码

　 1.

　<style type="text/css">

　 2.

　td{

　 3.

　border: 1px black solid;

　 4.

　text-align: center;

　5.

　}

　 6.

　</style>

　7.

　 8.

　两个 table 显示成一个 table 效果, 标题列不滚动：

　<BR>

　 9.

　 <table border="1" cellspacing="0" width="500px" style="border-color: black; " >

　 10.

　 <tr><td width="20%">标题 1</td><td width="20%">标题2</td><td width="20%">标题 3</td><td width="20%">标题4</td></tr>

　 11.

　 </table>

　 12.

　 <div id="tb" style="height: 100px; overflow-y: scroll; display:block; margin-top: -2; ">

　 13.

　 <table border="1" cellspacing="0" width="500px" style="border-color: black; " >

　 14.

　 <tr><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td></tr>

　 15.

　 <tr><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td></tr>

　 16.

　 <tr><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td></tr>

　 17.

　 <tr><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td></tr>

　 18.

　 <tr><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td></tr>

　 19.

　 <tr><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td></tr>

　 20.

　 <tr><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td></tr>

　 21.

　 <tr><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td></tr>

　 22.

　 <tr><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td></tr>

　 23.

　 </table>

　24.

　 </div>

推荐访问:两个table合并成一个table标题列不滚动 合并 滚动 两个