Question

我同时需要固定标题和固定列。

我想要固定标题（第一行和第一列）以及在给定时间显示的可滚动表格。

左侧包含标题列
包含标题行和表

IMP点：

当数据水平移动时：固定标题（第一行将相应移动）
当数据垂直移动时：固定列（第一列将相应移动）

这将允许我在没有标题列移动的情况下滚动水平，并且在没有标题行移动的情况下滚动顶点（通过我父猜想的一些绝对定位？）。

PS ：我搜索了很多，但我能找到的是，只有固定的标题或固定的第一列。我想要一次两个。这里是包含固定列的小提琴，请帮我添加固定标题（第一行）。

小提琴：http://jsfiddle.net/cfr94p3w/

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>

谢谢你，祝你有个美好的一天。

Answer 1

我终于得到了答案，我使用了https://github.com/meetselva/fixed-table-rows-cols

这是工作小提琴http://jsfiddle.net/cfr94p3w/17/

使用简单。只需使用普通的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：感谢所有人，主要是＆＃39; Bas van Stein＆＃39;为了帮助。

Answer 2

我想我明白你想要什么。如果我错了，请纠正我。以下jsFiddle：http://jsfiddle.net/cfr94p3w/14/

会做你想做的事情（它只需要额外的表头中的一些样式。）。

基本上，您创建了一个scroll绑定到文档和一个额外的表头，您可以在正确的时刻显示和隐藏。

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

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();
    }
});

带有固定标题和固定列的Html表

2 个答案: