Block table headers while scrolling (ColResizable)

Question

I am not very familiar with HTML, CSS and Javascript, and yet I am entrusted with creating a table system that allows the user to resize the columns of the table, but also has the specified headers at the top of the section on which the table is displayed when the user scrolls the table.

I know this sounds confusing, so I created Fiddle, which can accurately represent what I have now and hopefully where it needs to be updated.

I decided to use the JSColResizable plugin found here: http://www.bacubacu.com/colresizable/ and installed it in a fiddle that allows me to resize the table. I also wrapped the table in a div that allows me to display a height of 300 pixels at any time.

When a user goes through a table unit and scrolls down, the table headers go beyond the section, making it difficult for users to relate which column was what it was. I just need the entries in the table to continue to work the same way and scroll outside the div, but allow the headers to remain static at the top of the div so that they can be more easily associated with the columns.

If anyone has experience with this problem, I would really appreciate any help that could be offered.

Answer 1

You need to write a little jqueryfor it, and classin css

Here is a working script of what you want.

jQuery, .

JQuery

$(function(){
$.fn.fixMe = function () {
    return this.each(function () {
        var $this = $(this),
           $t_fixed;
        function init() {
            $this.wrap('<div class="container" />');
            $t_fixed = $this.clone();
            $t_fixed.find("tbody").remove().end().addClass("fixed").insertBefore($this);
            resizeFixed();
        }
        function resizeFixed() {
            $t_fixed.find("th").each(function (index) {
                $(this).css("width", $this.find("th").eq(index).innerWidth() + "px");
            });
        }
        function scrollFixed() {
            var offset = $(this).scrollTop(),
            tableOffsetTop = $this.offset().top,
            tableOffsetBottom = tableOffsetTop + $this.height() - $this.find("thead").height();
            if (offset < tableOffsetTop || offset > tableOffsetBottom) {
                $t_fixed.hide();
            }
            else if (offset >= tableOffsetTop && offset <= tableOffsetBottom && $t_fixed.is(":hidden")) {
                $t_fixed.show();
            }
            var tboffBottom = (parseInt(tableOffsetBottom) );
            var tboffTop = (parseInt(tableOffsetTop));

            if (offset >= tboffBottom && offset <= tableOffsetBottom) {
                $t_fixed.find("th").each(function (index) {
                    $(this).css("width", $this.find("th").eq(index).outerWidth() + "px");
                });
            }
        }
        $(window).resize(resizeFixed);
        $(window).scroll(scrollFixed);
        init();
    });
};

$("table").fixMe();
});

, .

Answer 2

. , , divs . , , , . SlickGrid -

Answer 3

CSS, , : , . , meybe , .

.fixed_headers {
   width: @table_width;
   table-layout: fixed;
   border-collapse: collapse;

https://codepen.io/tjvantoll/pen/JEKIu