Javascript 固定的html表格标题，而滚动
我有以下表格结构：Javascript 固定的html表格标题，而滚动,javascript,jquery,html,css,html-table,Javascript,Jquery,Html,Css,Html Table,我有以下表格结构： <table> <thead> <tr> <th colspan="4">Current</th> <th colspan="4">New/Requested</th> </tr> <tr> <th nowrap="nowrap">RSD &am
<table>
<thead>
<tr>
<th colspan="4">Current</th>
<th colspan="4">New/Requested</th>
</tr>
<tr>
<th nowrap="nowrap">RSD </th>
<th nowrap="nowrap">CRSD </th>
<th nowrap="nowrap">MSD </th>
<th nowrap="nowrap">Open QTY </th>
<th nowrap="nowrap">CRD </th>
<th nowrap="nowrap">CRSD </th>
<th nowrap="nowrap">MSD </th>
<th nowrap="nowrap">Open QTY </th>
<th nowrap="nowrap">Action</th>
<th nowrap="nowrap">Reason</th>
<th nowrap="nowrap">Action Code Status </th>
</tr>
<tbody>
<tr>
<td></td>
<td></td>
.....plenty of rows
</tr>
</tbody>
</thead>
</table>
现在的
新的/要求的
区署
CRSD
MSD
未结数量
CRD
CRSD
MSD
未结数量
行动
理由
动作代码状态
……很多行
我看了看，但听不懂。我该怎么做 试试这种方法，但它可能不是最好的方法
<table style="top: 0px; position: fixed; z-index: 1; background-color: White">
<tr>
<th colspan="4">Current</th>
<th colspan="4">New/Requested</th>
</tr>
<tr>
<th nowrap="nowrap">RSD </th>
<th nowrap="nowrap">CRSD </th>
<th nowrap="nowrap">MSD </th>
<th nowrap="nowrap">Open QTY </th>
<th nowrap="nowrap">CRD </th>
<th nowrap="nowrap">CRSD </th>
<th nowrap="nowrap">MSD </th>
<th nowrap="nowrap">Open QTY </th>
<th nowrap="nowrap">Action</th>
<th nowrap="nowrap">Reason</th>
<th nowrap="nowrap">Action Code Status </th>
</tr>
</table>
<table>
<tbody>
<tr>
<td></td>
<td></td>
.....plenty of rows
</tr>
</tbody>
</table>
现在的
新的/要求的
区署
CRSD
MSD
未结数量
CRD
CRSD
MSD
未结数量
行动
理由
动作代码状态
……很多行
.fixhead
{
position:relative
overflow:auto;
}
thead tr{位置：相对；
top：表达式（offsetParent.scrollTop）；
}
身份证件
名称
//////////代码
////////代码
谢谢为了实现我的目标，我编写了以下代码（如问题所述）- 这是我写的插件
(function ($) {
$.fn.scrollbarTable = function (i) {
var o = {};
if (typeof (i) == 'number') o.height = i;
else if (typeof (i) == 'object') o = i;
else if (typeof (i) == 'undefined') o = {
height: 300
}
return this.each(function () {
var $t = $(this);
var w = $t.width();
$t.width(w - function (width) {
var parent, child;
if (width === undefined) {
parent = $('<div style="width:50px;height:50px;overflow:auto"><div style="height:50px;"></div></div>').appendTo('body');
child = parent.children();
width = child.innerWidth() - child.height(99).innerWidth();
parent.remove();
}
return width;
}());
var cols = [];
var tableCols = [];
$t.find('thead th,thead td').each(function () {
cols.push($(this).width());
});
$t.find('tr:eq(1) th,thead td').each(function () {
tableCols.push($(this).width());
});
var $firstRow = $t.clone();
$firstRow.find('tbody').remove();
$t.find('thead').remove();
$t.before($firstRow);
$firstRow.find('thead th,thead td').each(function (i) {
$(this).attr('width', cols[i]);
});
$t.find('tr:first th,tr:first td').each(function (i) {
$(this).attr('width', tableCols[i]);
});
var $wrap = $('<div>');
$wrap.css({
width: w,
height: o.height,
overflow: 'auto'
});
$t.wrap($wrap);
})
};
}(jQuery));
无论如何，感谢你们所有人的支持……：） 在tbody的css中设置溢出：自动。因此我不得不为我的工作创建一个类似的组件。（注意：诚然，我是用jQuery实现的，但是没有jQuery也可以实现。） 我提出的解决方案是类似的，我想我会分享它，因为它更简单 基本上，您可以将
表divtbody<div class="containerdiv">
<table class="headerTable">
<colgroup>
<col /> * number of columns
....
</colgroup>
<thead>
<th></th>
....
</thead>
</table>
<table class="dataTable">
<colgroup>
<col /> * number of columns
....
</colgroup>
<thead>
<th></th>
....
</thead>
<tbody>
<td></td>
....
</tbody>
</table>
</div>
然后JavaScript基本上创建
colgroups<script type="text/javascript">
$(document).ready(function() {
$('#YourTable').fixedtableheader();
});
</script>
$（文档）.ready（函数（）{
$（“#YourTable”）.fixedtableheader（）；
});
将
#YourTable<!-- divs with IDs are manipulated with javascript -->
<div class="fixedTableHolder">
<div class="maskHolder">
<div id="mask" class="mask"> </mask>
</div>
<div class="fixedTable">
<div id="theTable" class="theTable">
<!-- here is the table, header row must have an ID -->
<table border="0" cellspacing="5" cellpadding="5">
<tr id="thFixed" class="thFixed">
<td class="col1">Header cell 1</td>
</tr>
<tr>
<td class="col1">regular cell</td>
</tr>
</table>
</div>
</div>
</div>
标题单元格1
规则细胞
这里是JSFIDLE中的一个演示：好吧，希望有人会读到这篇文章，并节省一些时间：） 我的目标是制作一个小的（尽可能小的）js，它将接受tableID，并将标题设置为固定的。 它与这里给出的不同之处在于它使用window.resize重新计算宽度，因此它允许动态调整表的大小，并且从一开始就不使用固定的大小。从理论上讲，假设使用任何表格。。。（那是我的情况…）
函数HeadsUp（）
{
var headers=$（“#网格tr”）.first（）；
headers.css（“margin top”（（headers.height（）+1）*-1）+“px”）；//根据需要编辑+1。。。
标题css（“位置”、“绝对”）；
}
函数ResizeHeaders（）
{
风险值网格=$（“#网格”）；
var headers=$（“#网格tr”）.first（）；
var firstdatarow=$（“#网格tr:nth child（2）”；
headers.width（grid.width（））；
var s=firstdatarow.children（“td”）；
var d=headers.children（“th”）；//如果在那里使用，则替换为td
对于（i=0；i而言，对我有效的最佳选择是向样式表中的th类添加以下css属性
th
{
position: -webkit-sticky;
position: sticky;
top: 0px;
z-index: 5;
}
检查这个问题，但我的表体不可滚动，当我滚动页面时我想要这个，而不是表体，我仍然在玩这个…@Vivek-你尝试过解决方案了吗………你在哪个浏览器中工作？@Vivek-尝试jquery插件，如果它对你有效，请接受ans]对不起，我是这个论坛的新手，所以不知道如何粘贴该页面输入答案。请不要介意。是的……我们必须等两天才能接受自己的答案……这就是我花时间接受的原因。：）和Sreekesh Okky一样的问题，什么是表格？tabss？Vivek什么是表格？tabss？tabss是表格IDhmm…这似乎是一个很好的方法…但正如我在你的小提琴中看到的…标题边框和单元格边框没有对齐…所以扰乱了表格的形状…让我知道你想如何解决这个问题。@Vivek在Chrome和IE8中进行了测试。它是什么浏览器你在使用？@vivek吗？我刚刚在Firefox中测试过，它没有对齐。这与它计算宽度的方式有关吗？它创建col元素并设置宽度的代码在chrome/Ie中为边距/边框添加了6个像素，在Firefox中这是6个，它是5个。如果有人像我一样在SharePoint中需要这些东西，请重播
div.containerDiv
{
height: 300px; // Whatever height you need. can be set inline if you wish
}
div.containerDiv table.headerTable
{
position: absolute;
}
div.containerDiv table.dataTable thead
{
visibility: hidden; // This gives the header table room so it doesn't hide the first row.
}
<script type="text/javascript">
$(document).ready(function() {
$('#YourTable').fixedtableheader();
});
</script>
<!-- divs with IDs are manipulated with javascript -->
<div class="fixedTableHolder">
<div class="maskHolder">
<div id="mask" class="mask"> </mask>
</div>
<div class="fixedTable">
<div id="theTable" class="theTable">
<!-- here is the table, header row must have an ID -->
<table border="0" cellspacing="5" cellpadding="5">
<tr id="thFixed" class="thFixed">
<td class="col1">Header cell 1</td>
</tr>
<tr>
<td class="col1">regular cell</td>
</tr>
</table>
</div>
</div>
</div>
function HeadsUp()
{
var headers = $("#TheGrid tr").first();
headers.css("margin-top", ((headers.height()+1)*-1)+"px");//edit +1 with what you want...
headers.css("position", "absolute");
}
function ResizeHeaders()
{
var grid = $("#TheGrid");
var headers = $("#TheGrid tr").first();
var firstdatarow = $("#TheGrid tr:nth-child(2)");
headers.width(grid.width());
var s = firstdatarow.children("td");
var d = headers.children("th");//replace with td if you use it there
for(i=0; i<s.length; i+=1) {
d[i].width = s[i].clientWidth;
}
}
$(function () {
HeadsUp();
ResizeHeaders();
});
$( window ).resize(function() {
ResizeHeaders();
});
th
{
position: -webkit-sticky;
position: sticky;
top: 0px;
z-index: 5;
}