Fixed header for table on scroll (CSS)?

Question

css

There is a large HTML table that does not fit into the screen either horizontally or vertically.
It is necessary to make sure that when scrolling down, the table header is always displayed on the page.
(similar functionality is implemented in MS Excel)

Ideally, you need to do the same for the first column, which would remain on the page when scrolling to the right.

Is it possible to do with one CSS here, or will you have to include JS?

Answer 1

Look here .

Answer 2

Since no one offers, I will offer my own version.
When scrolling the screen, if the coordinates of the header relative to the page go beyond the screen, then display a fixed "table", with the position "left" as in the header of the table, and "top" close to 0. You need to copy the contents of the header into this table, for example, using $( 'tr.head').clone();
Or use this option, the container will be a table, and its header will be a “sticky sidebar”. If the table moves across the screen, the header will move down to the maximum position possible to be visible.

Answer 3

the title is easy if absolutely positioned via position:absolute;top:0;left:0

Answer 4

Sterhel - offered a good option.
As for your question, it all comes down to design, in some cases you can get by with only css, in some you need js, it is also important to know which browsers you need to support.

Answer 5

I went to habr to find the answer, but here they write this, they would be embarrassed.
Still, how to make a hat like on yandex.ru (http://yandex.ru/yandsearch?text=sdasf&clid=9403&lr=2).
Using this technology, the first column could also be fixed, and all these css tricks described above are not at all suitable and interfere with page scrolling and are not at all convenient in templates.

Answer 6

for tables, the DataTables plugin is very good, and in particular FixedHeader www.datatables.net/release-datatables/extras/FixedHeader/index.html

Answer 7

There is also this option - https://codepen.io/login2030/pen/dLRVLB
This is an option without js, but it is not suitable for everyone, as it uses position: sticky