HTML表格固定表头和固定列

Question

我需要同时拥有固定的表头和列。

我想在特定时间显示一个可滚动的表格，并拥有固定的表头(第一行)和列。

• 左侧包含表头列
• 右侧包含表头行和表格

重要提示:

• 当数据向水平方向移动时：固定表头(第一行将相应移动)
• 当数据向垂直方向移动时：固定列(第一列将相应移动)

这将使我能够水平滚动而不会使表头列移动，垂直滚动而不会使表头行移动(我猜是通过其父元素内的绝对定位实现?)。

附注：我已经搜寻了很多，但找到的都只有固定的表头或固定的第一列。我想同时拥有两者。 这里是包含固定列的fiddle，请帮助我添加固定表头(第一行)。

fiddle: 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>

谢谢，祝您有愉快的一天。

- Pratik Bhoir

---

但是如果你这样做，表格就没有意义了，房间无法显示是否预订，如果数据是可移动的，除非我漏掉了什么。 - StudioTime

可能是HTML带固定表头的表格？的重复问题。 - Asons

@LGSon 不是的，他想要将其与一个固定的第一列结合起来。 - Bas van Stein

你可以通过复制头部和左侧的内容并将其覆盖在顶部，只保留头部和第一列 - 然后在水平滚动时隐藏虚假的头部，在垂直滚动时隐藏虚假的左侧列 - 哈哈，实际上就像刚刚发布的答案一样。 - StudioTime

@PratikBhoir 只需跟随“重复链接”，那里有21个答案，我相信其中一个符合您的需求。 - Asons

Answer 1

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

这是一个可以正常工作的fiddle 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: 感谢大家，尤其是“Bas van Stein”的帮助。

- Pratik Bhoir

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

- Bas van Stein

---

确切地说，这正是我所思考的。但是，它需要一些完善。如果您能尝试一下，那就太好了。 - Pratik Bhoir

好的，我想通了，只有表头单元格的长度你还需要正确设置，但这很容易用JavaScript实现，不是问题的一部分 ;) - Bas van Stein