javascript - 具有固定标题和固定列的 Html 表

Question

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

我想要固定的标题(第一行和第一列)和一个在给定时间显示的可滚动表格。

• 左边一个包含标题栏
• 右边一个包含标题行和表格

IMP 点:

• 当数据水平移动时:Fixed Header(第一行会相应移动)
• 当数据垂直移动时:固定列(第一列会相应移动)

这将允许我在不移动标题列的情况下水平滚动，并且在不移动标题行的情况下垂直滚动(我猜是通过其父项中的一些绝对定位？)。

PS:我搜索了很多，但我能找到的是，只有固定的标题或固定的第一列。我同时想要两个。这是包含固定列的 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>

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

Answer 1

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

这是工作 fiddle http://jsfiddle.net/cfr94p3w/17/

使用起来很简单。只需使用普通的 HTML 表格并应用插件
记者: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' 的帮助。