以单独做一个滚动条，让滚动条的位置变化时，只显示TBody中指定范围的TR来实现滚动，便有了下面的实现，可以在IE/FF下运行，在滚动条上滚动鼠标轮时可以实现TBody滚动。
<html><head>
<title>Untitled</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function(){
var table = $('table.scrolltable').each(function(){
var $table = $(this).css('border-collapse','collapse')
var $tbody = $table.find('tbody').eq(0)
var sbPosition = {left: $tbody.position().left + $tbody.outerWidth(), top: $tbody.position().top }
var $scrollbar = $('<div class="scrollbar"/>').css({'position':'absolute', 'overflow-y':'auto',left:sbPosition.left, top:sbPosition.top, height:'0px',width:'20px'})
.append($('<div/>'))
.appendTo($table.parent())
1.<!--div比table大小要小才会显示-->2.<div style="overflow-x: auto overflow-y: auto height: 100px width:200px">
3. <table id="table" border="1" align="center" width="300px" height="200px">
4. <tbody>
5. <tr><td>00</td><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td></tr>
6. <tr><td>10</td><td>11</td><td>12</td><td>13</td><td>15</td><td>15</td></tr>
7. <tr><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td></tr>
8. <tr><td>30</td><td>31</td><td>32</td><td>33</td><td>34</td><td>35</td></tr>
9. </tbody>
10.</table>
11. </body>
12. </div>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）