固定标题的滚动 table 中的粘性副标题

Question

我正在尝试创建一个带有固定 header 的 table，其中 body 在头部下方滚动 - 这很好，并且有很多很好的例子.

复杂的是，我希望能够让粘性子 header 与 table 的其余部分一起滚动，直到它们到达 table header，然后在该部分的其余部分滚动到它们下方之前不要移动，此时它们将被下一个粘性子 header 取代（有点像 iphone 地址簿）。我需要它的外观示例：Getting a sticky header to "push up", like in Instagram's iPhone app using CSS and jQuery

上面的例子没有用 table 完成，我有很多表格数据需要显示，所以它需要是 table.

到目前为止我还没有找到这个工作的例子，我尝试过的一切都惨遭失败。我在没有任何固定头等的 jsfiddle 示例中包含了一个 link，因为我认为它会避免与其他解决方案发生冲突：https://jsfiddle.net/q7zLhus0/

<table>
<thead>
    <th>A</th>
    <th>B</th>
    <th>C</th>
    <th>D</th>
    <th>E</th>
</thead>
<tbody>
    <tr>
        <th class="subheader" scope="rowgroup" colspan="5">Data group 1</th>
    </tr>
    <tr>
        <td>1</td>
        <td>6</td>
        <td>3</td>
        <td>6</td>
        <td>2</td>

    </tr>
    <tr>
        <td>1</td>
        <td>5</td>
        <td>7</td>
        <td>2</td>
        <td>5</td>

    </tr>
    <tr>
        <td>S</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>6</td>

    </tr>
    <tr>
        <td>8</td>
        <td>5</td>
        <td>3</td>
        <td>7</td>
        <td>9</td>

    </tr>
    <tr>
        <th class="subheader" scope="rowgroup" colspan="5">Data group 2</th>
    </tr>
    <tr>
        <td>A</td>
        <td>5</td>
        <td>3</td>
        <td>H</td>
        <td>D</td>
    </tr>
    <tr>
        <td>Q</td>
        <td>R</td>
        <td>T</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>6</td>
        <td>4</td>
        <td>W</td>
        <td>2</td>
        <td>6</td>
    </tr>
    <tr>
        <td>5</td>
        <td>3</td>
        <td>W</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <th class="subheader" scope="rowgroup" colspan="5">Data group 3</th>
    </tr>
    <tr>
        <td>1</td>
        <td>9</td>
        <td>E</td>
        <td>3</td>
        <td>S</td>
    </tr>
    <tr>
        <td>T</td>
        <td>4</td>
        <td>D</td>
        <td>H</td>
        <td>S</td>
    </tr>
    <tr>
        <td>4</td>
        <td>S</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
    </tr>
    <tr>
        <td>1</td>
        <td>4</td>
        <td>R</td>
        <td>7</td>
        <td>S</td>
    </tr>
    <tr>
        <th class="subheader" scope="rowgroup" colspan="5">Data group 4</th>
    </tr>
    <tr>
        <td>5</td>
        <td>D</td>
        <td>S</td>
        <td>6</td>
        <td>S</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>4</td>
        <td>5</td>
        <td>J</td>
    </tr>
    <tr>
        <td>6</td>
        <td>S</td>
        <td>D</td>
        <td>F</td>
        <td>3</td>
    </tr>
    <tr>
        <td>F</td>
        <td>L</td>
        <td>P</td>
        <td>T</td>
        <td>D</td>
    </tr>
    <tr>
        <th class="subheader" scope="rowgroup" colspan="5">Data group 5</th>
    </tr>
    <tr>
        <td>5</td>
        <td>D</td>
        <td>S</td>
        <td>6</td>
        <td>S</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>4</td>
        <td>5</td>
        <td>J</td>
    </tr>
    <tr>
        <td>6</td>
        <td>S</td>
        <td>D</td>
        <td>F</td>
        <td>3</td>
    </tr>
    <tr>
        <td>F</td>
        <td>L</td>
        <td>P</td>
        <td>T</td>
        <td>D</td>
    </tr>
    <tr>
        <th class="subheader" scope="rowgroup" colspan="5">Data group 6</th>
    </tr>
    <tr>
        <td>5</td>
        <td>D</td>
        <td>S</td>
        <td>6</td>
        <td>S</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>4</td>
        <td>5</td>
        <td>J</td>
    </tr>
    <tr>
        <td>6</td>
        <td>S</td>
        <td>D</td>
        <td>F</td>
        <td>3</td>
    </tr>
    <tr>
        <td>F</td>
        <td>L</td>
        <td>P</td>
        <td>T</td>
        <td>D</td>
    </tr>
    <tr>
        <th class="subheader" scope="rowgroup" colspan="5">Data group 7</th>
    </tr>
    <tr>
        <td>5</td>
        <td>D</td>
        <td>S</td>
        <td>6</td>
        <td>S</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>4</td>
        <td>5</td>
        <td>J</td>
    </tr>
    <tr>
        <td>6</td>
        <td>S</td>
        <td>D</td>
        <td>F</td>
        <td>3</td>
    </tr>
    <tr>
        <td>F</td>
        <td>L</td>
        <td>P</td>
        <td>T</td>
        <td>D</td>
    </tr>
    <tr>
        <th class="subheader" scope="rowgroup" colspan="5">Data group 8</th>
    </tr>
    <tr>
        <td>5</td>
        <td>D</td>
        <td>S</td>
        <td>6</td>
        <td>S</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>4</td>
        <td>5</td>
        <td>J</td>
    </tr>
    <tr>
        <td>6</td>
        <td>S</td>
        <td>D</td>
        <td>F</td>
        <td>3</td>
    </tr>
    <tr>
        <td>F</td>
        <td>L</td>
        <td>P</td>
        <td>T</td>
        <td>D</td>
    </tr>
</tbody>

如有任何帮助，我们将不胜感激。这个真的难倒我了。

Answer 1

添加此功能

function stickyTitles(stickies) {

        var thisObj = this;

        thisObj.load = function () {

            stickies.each(function () {

                var thisSticky = jQuery(this).append('<span class="test" />');
                thisSticky.parent().height(thisSticky.outerHeight());

                jQuery.data(thisSticky[0], 'pos', thisSticky.offset().top);

            });

            jQuery(window).off("scroll.stickies").on("scroll.stickies", function () {

                thisObj.scroll();

            });
        }

        thisObj.scroll = function () {

            stickies.each(function (i) {

                var thisSticky = jQuery(this),
                    nextSticky = stickies.eq(i + 1),
                    prevSticky = stickies.eq(i - 1),
                    pos = jQuery.data(thisSticky[0], 'pos');

                if (pos <= jQuery(window).scrollTop()) {

                    thisSticky.addClass("fixed");

                    if (nextSticky.length > 0 && thisSticky.offset().top >= jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight()) {

                        thisSticky.addClass("absolute").css("top", jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight());
                    }

                } else {

                    thisSticky.removeClass("fixed");

                    if (prevSticky.length > 0 && jQuery(window).scrollTop() <= jQuery.data(thisSticky[0], 'pos') - prevSticky.outerHeight()) {

                        prevSticky.removeClass("absolute").removeAttr("style");
                    }
                }
            });
        }
    }

    jQuery(document).ready(function () {

        new stickyTitles(jQuery(".subheader")).load();

    });

演示 Link -https://jsfiddle.net/kjo9w57a/1/

固定标题的滚动 table 中的粘性副标题

Sticky subheaders in a scrolling table with a fixed head

javascript

html

css

html-table

fixed-header-tables