读书人

两个table合龙成一个table 标题列不滚

发布时间: 2012-11-13 10:00:50 作者: rapoo

两个table合并成一个table 标题列不滚动

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

?

<style type="text/css">td{border:1px black solid; text-align:center;}   </style>     两个table显示成一个table效果,标题列不滚动:<BR> <table border="1" cellspacing="0" width="500px" style="border-color:black;" >          <tr><td width="20%">标题1</td><td width="20%">标题2</td><td width="20%">标题3</td><td width="20%">标题4</td></tr>      </table>    <div id="tb" style="height:100px;overflow-y:scroll;display:block;margin-top:-2;">  <table border="1" cellspacing="0" width="500px" style="border-color:black;" >          <tr><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td></tr>          <tr><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td></tr>          <tr><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td></tr>          <tr><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td></tr>          <tr><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td></tr>          <tr><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td></tr>          <tr><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td></tr>          <tr><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td></tr>          <tr><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td></tr>      </table>   </div>

?

?

读书人网 >Web前端

热点推荐