下面是小编为大家整理的两个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标题列不滚动 合并 滚动 两个