raf*_*fek 8 html asp.net scroll html-table
我有三个div.标题,中心和页脚.中央div(gridview)中有一个表,它几乎总是比外部div长.所以我把这个div垂直滚动了.问题是:如何在div向下滚动后显示表头？我可以使用单独的div或表完成此标题并使其固定但表中列的宽度并不总是相同 - 所以我不知道如何在标题中保持列的宽度.任何线索？
Mar*_*ark 13
我刚刚整理了一个完全符合你想要的jQuery插件.它非常小,非常容易实现.
所需要的只是一个包含thead和tbody的表.
您可以使用类名将该表包装在DIV中,并且该表将始终调整大小以适合该div.例如,如果您的div与浏览器窗口一起缩放,那么表格也是如此.滚动时将固定标题.页脚将被固定(如果您启用页脚).您还可以选择在页脚中克隆标题并将其修复.此外,如果您使浏览器窗口太小而且所有列都不适合......它也会水平滚动(标题也是如此).
你只需将DIV的类名传递给插件就像这样:$('.myDiv').fixedHeaderTable({footer:true,footerId:'myFooterId'}); 而插件将完成剩下的工作.FooterID是页面上包含页脚标记的元素.如果您希望将分页作为页脚,则使用此选项.
如果页面上有多个表,它也适用于您希望拥有固定标题的每个表.
在这里查看:http://fixedheadertable.mmalek.com/
请记住它仍然是'beta',因此我每天都会添加新功能和错误修复程序.
支持的浏览器:IE6,IE7,IE8,FireFox,Safari和Chrome
小智 12
解决方案非常简单.你需要3个DIV:一个普通的容器(在我的类中是"外部"),一个表容器(在我的类中是"inner")和一个DIV,你可以使用jQuery或javaScript克隆一个现有的表(在我的类"标题"的情况下).
解决方案使用CSS和几行jQuery代码,将"inner"的HTML克隆到"header"中并设置其宽度和高度.支持固定和可变列宽.经过IE8,Firefox 9,Safari和谷歌Chrome的测试.
这是一个示例代码:
$(document).ready(function() {
$('.header').html( $('.inner').html() );
$('.header').css('width', $('.inner table').outerWidth() );
$('.header').css('height', $('.inner table thead').outerHeight() );
});table {
width:100%;
}
th {
border-top:1px solid #999;
text-align:left;
}
td, th {
border-bottom:1px solid #999;
background-color:#EEE;
}
.outer {
position:relative;
width:500px;
}
.inner {
height:150px;
overflow:auto;
}
.header {
position:absolute;
top:0;
left:0;
overflow:hidden;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="outer">
<div class="inner">
<table cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
</tr>
</thead>
<tbody>
<tr><td>1</td><td>b</td><td>c</td><td>d</td></tr>
<tr><td>2</td><td>b</td><td>c</td><td>d</td></tr>
<tr><td>3</td><td>b</td><td>c</td><td>d</td></tr>
<tr><td>4</td><td>b</td><td>c</td><td>d</td></tr>
<tr><td>5</td><td>b</td><td>c</td><td>d</td></tr>
<tr><td>6</td><td>b</td><td>c</td><td>d</td></tr>
<tr><td>7</td><td>b</td><td>c</td><td>d</td></tr>
<tr><td>8</td><td>b</td><td>c</td><td>d</td></tr>
<tr><td>9</td><td>b</td><td>c</td><td>d</td></tr>
<tr><td>10</td><td>b</td><td>c</td><td>d</td></tr>
<tr><td>11</td><td>b</td><td>c</td><td>d</td></tr>
<tr><td>12</td><td>b</td><td>c</td><td>d</td></tr>
</tbody>
</table>
</div>
<div class="header">
</div>
</div>
</body>alu*_*umb 11
这是使用javascript的基本解决方案:
function position(table) {
table.rows[0].style.position="absolute";
table.rows[0].style.top="0px";
table.style.marginTop = table.rows[0].clientHeight/1.2;
var widths = Array();
for(var i = 0; i < table.rows[0].cells.length; i++) {
widths[i] = max(table.rows[0].cells[i].clientWidth, table.rows[1].cells[i].clientWidth);
}
for(var row = 0; row < table.rows.length; row++) {
for(var col = 0; col < widths.length; col ++) {
table.rows[row].cells[col].style.width = widths[col] + "px";
}
}
}
function max(num1, num2) { return (num1 > num2) ? num1 : num2; }
| 归档时间： |
|
| 查看次数： |
58549 次 |
| 最近记录： |