javascript 带有固定标题和固定列的 Html 表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33463470/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Html table with fixed header and fixed column both
提问by Pratik Bhtheitroad
I need both fixed headers and fixed columns at the same time.
我同时需要固定标题和固定列。
I want to have fixed headers (first row and first column) and a scrollable table displaying at a given time.
我想要固定标题（第一行和第一列）和在给定时间显示的可滚动表格。
- A left one containing the header column
- A right one containing the header row and the table
- 包含标题列的左侧
- 右侧包含标题行和表格
IMP Point:
IMP点：
- When data moves horizontally: Fixed Header(first row will move accordingly)
- When data moves vertically: Fixed Column(first column will move accordingly)
- 当数据水平移动时：Fixed Header（第一行会相应移动）
- 数据垂直移动时：固定列（第一列会相应移动）
This would allow me to scroll horizontaly without have the header column moving, and to scroll verticaly without having the header row moving (by some absolute positioning within its parents I guess ?).
这将允许我在不移动标题列的情况下水平滚动，并且在不移动标题行的情况下垂直滚动（我猜是通过其父项中的某些绝对定位？）。
PS: I have searched a lot, but what i could found is, only fixed headers or fixed first column. I want both at a time. Here is the fiddle which contains fixed column, Please help me in adding fixed header(first row) in it.
PS：我搜索了很多，但我能找到的是，只有固定的标题或固定的第一列。我一次要两个。这是包含固定列的小提琴，请帮助我在其中添加固定标题（第一行）。
fiddle: http://jsfiddle.net/cfr94p3w/
小提琴：http: //jsfiddle.net/cfr94p3w/
Html Code:
html代码：
<div class="table-container">
<div class="headcol">
<table>
<thead>
<th>Room</th>
</thead>
<tbody>
<tr>
<td>Fooname</td>
</tr>
<tr>
<td>Barname</td>
</tr>
<tr>
<td>Barfoo</td>
</tr>
<tr>
<td>Zorzor</td>
</tr>
<tr>
<td>Lorname Ipsname</td>
</tr>
</tbody>
</table>
</div>
<div class="right">
<table>
<thead>
<th>8-10</th>
<th>10-12</th>
<th>12-14</th>
<th>14-16</th>
<th>16-18</th>
<th>18-20</th>
</thead>
<tbody>
<tr>
<td class="cell booked">Already booked</td>
<td class="cell available">Available for booking</td>
<td class="cell booked">Already booked</td>
<td class="cell booked">Already booked</td>
<td class="cell available">Available for booking</td>
<td class="cell available">Available for booking</td>
</tr>
<tr>
<td class="cell available">Available for booking</td>
<td class="cell booked">Already booked</td>
<td class="cell booked">Already booked</td>
<td class="cell available">Available for booking</td>
<td class="cell booked">Already booked</td>
<td class="cell available">Available for booking</td>
</tr>
<tr>
<td class="cell booked">Already booked</td>
<td class="cell available">Available for booking</td>
<td class="cell booked">Already booked</td>
<td class="cell booked">Already booked</td>
<td class="cell available">Available for booking</td>
<td class="cell available">Available for booking</td>
</tr>
<tr>
<td class="cell booked">Already booked</td>
<td class="cell available">Available for booking</td>
<td class="cell available">Available for booking</td>
<td class="cell available">Available for booking</td>
<td class="cell booked">Already booked</td>
<td class="cell booked">Already booked</td>
</tr>
<tr>
<td class="cell booked">Already booked</td>
<td class="cell available">Available for booking</td>
<td class="cell booked">Already booked</td>
<td class="cell booked">Already booked</td>
<td class="cell booked">Already booked</td>
<td class="cell available">Available for booking</td>
</tr>
</tbody>
</table>
</div>
</div>
Thank you and have nice day.
谢谢你，祝你有美好的一天。
采纳答案by Pratik Bhtheitroad
I finally Got the answer, I used the https://github.com/meetselva/fixed-table-rows-cols
我终于得到了答案，我使用了https://github.com/meetselva/fixed-table-rows-cols
Here is the working fiddle http://jsfiddle.net/cfr94p3w/17/
这是工作小提琴http://jsfiddle.net/cfr94p3w/17/
It's simple to use. Just take normal HTML table and apply the plugin
JS: https://rawgit.com/meetselva/fixed-table-rows-cols/master/js/fixed_table_rc.js
css: https://rawgit.com/meetselva/fixed-table-rows-cols/master/css/fixed_table_rc.css
使用起来很简单。只需采用普通的 HTML 表格并应用插件
JS：https: //rawgit.com/meetselva/fixed-table-rows-cols/master/js/fixed_table_rc.js
css：https: //rawgit.com/meetselva/fixed- table-rows-cols/master/css/fixed_table_rc.css
$(document).ready(function() {
$('#fixedHeader').fxdHdrCol({
fixedCols: 2,
width: "100%",
height: 400,
colModal: [
{ width: 100, align: 'center' },
{ width: 70, align: 'center' },
{ width: 70, align: 'left' },
{ width: 70, align: 'left' },
{ width: 70, align: 'left' },
{ width: 70, align: 'left' },
{ width: 70, align: 'left' },
{ width: 70, align: 'center' },
],
});
});
PS: Thanks everybody, mostly 'Bas van Stein' for the assistance.
PS：谢谢大家，主要是“Bas van Stein”的帮助。
回答by Bas van Stein
I think I understand what you want. Correct me if I am wrong. The following jsFiddle : http://jsfiddle.net/cfr94p3w/14/
我想我明白你想要什么。如果我错了，请纠正我。以下jsFiddle：http: //jsfiddle.net/cfr94p3w/14/
Will do what you want (it only needs a bit of styling in the additional table head.).
会做你想做的（它只需要在额外的表头中做一些样式。）。
Basically you create a scrollbinding to the document and an extra table header that you show and hide at the correct moment.
基本上，您创建了一个scroll到文档的绑定和一个额外的表格标题，您可以在正确的时刻显示和隐藏它。
html to add
要添加的html
<table id="header-fixed1">
<thead>
<th>Room</th>
</thead>
</table>
/*Later after class="right"*/
<table id="header-fixed2">
<thead>
<th>8-10</th>
<th>10-12</th>
<th>12-14</th>
<th>14-16</th>
<th>16-18</th>
<th>18-20</th>
</thead>
</table>
javascript / jQuery
javascript / jQuery
var tableOffset = $("#tablepart1").offset().top;
var $fixedHeader1 = $("#header-fixed1");
var $fixedHeader2 = $("#header-fixed2");
$(window).bind("scroll", function() {
var offset = $(this).scrollTop();
if (offset >= tableOffset && $fixedHeader1.is(":hidden")) {
$fixedHeader1.show();
$fixedHeader2.show();
}
else if (offset < tableOffset) {
$fixedHeader1.hide();
$fixedHeader2.hide();
}
});
