怎样设置tbody里面的滚动

2023-04-30 03:05:02html-css091

怎样设置tbody里面的滚动,第1张

以单独做一个滚动条，让滚动条的位置变化时，只显示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())

可以参考此样例：

.table{width:100%overflow-x: scrollbackground-color:#7c95b5}.fixedTable{width:160%text-align: centercolor:#ffffont-size:14pxborder-collapse:collapse}.fixedTable tr{line-height: 30pxborder:1px solid #fff}.fixedTable tr:first-child{height:40pxline-height: 40pxbackground-color:cadetblue}.fixedTable td:first-child{position:absolutewidth:105pxbackground-color:cadetblueborder:1px solid #fffmargin:-1px 0px 0px -1px}.fixedColumn{width:99px}

<html>

<head>

<title>使用css固定table第一列</title>

</head>

<body>