怎样设置tbody里面的滚动_IT百科

以单独做一个滚动条，让滚动条的位置变化时，只显示TBody中指定范围的TR来实现滚动，便有了下面的实现，可以在IE/FF下运行，在滚动条上滚动鼠标轮时可以实现TBody滚动。

<html>

<head>

<title>Untitled</title>

$(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.

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>

table设置overflow-x:auto,overflow-y:hidden

thead设置overflow:hidden

tbody设置overflow-y:hidden,overflow-x:hidden

还有就是你table要定宽高

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/bake/11907620.html

怎样设置tbody里面的滚动

发表评论

评论列表（0条）