Question

I have a script (jsfiddle demo) that keeps the row title and column title of a large table visible while scrolling. The second row of the header has a < select > element in each cell. The problem is that when I scroll the table and the header “floats”, the selects are not working anymore. They are not selectable. And the first row is not active too (cannot select the text, for copy-paste). Is there any solution to fix this? Thanks.

Answer 1

this doesn’t affect all browsers and is caused by pointer-events: none; set in CSS for clone – just remove that declaration and everything works like a charm:

    if (clone_table.length == 0) {
        clone_table = $("#main_table")
            .clone()
            .attr('id', 'clone')
            .css({
                width: $("#main_table").width()+"px",
                position: 'fixed',
                //pointerEvents: 'none',  // this is the problem
                left: $("#main_table").offset().left+'px',
                top: 0
            })
            .appendTo($("#table_container"))
            .css({
                visibility: 'hidden'
            })
            .find("thead").css({
                visibility: 'visible'
            });
    }

looking at the documentation this is intended behaviour:

The element is never the target of mouse events […]