当前位置:才高文秘网>范文大全 > 公文范文 > 两个table合并成一个table标题列不滚动(全文)

两个table合并成一个table标题列不滚动(全文)

时间:2022-08-28 10:50:08 公文范文 来源:网友投稿

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

版权所有:才高文秘网 2017-2024 未经授权禁止复制或建立镜像[才高文秘网]所有资源完全免费共享

Powered by 才高文秘网 © All Rights Reserved.。备案号:沪ICP备17045173号-3