A table with a fixed header and some columns. Maybe?

Question

css

How to implement a table in HTML/CSS/JS with a fixed header and first columns? (For example, in Excel you can freeze certain rows and columns). Wanted to peep in google docs; a lot of code, besides - everything is compressed. Therefore, I ask here.
Tried to solve with thead {position: fixed}. The problem is that the table is very large, not included in the screen size, and when scrolling horizontally, the header remains fixed. Simply put, in CSS4 pseudo-CSS it should look like this: thead { position-x: default; position-y: fixed;}.
But this is half the trouble. I don't know how to freeze columns.
Intuitively, it seems that everything is decided in JavaScript, but apparently I googled clumsily.

Answer 1

Is jQuery right for you? They have many similar plugins like .
Well, then, if this option suits you, Google will help you :)

Answer 2

Several tweaks have been made to Google docs so that performance does not suffer. But they all require active use of JS
1. table-layout: fixed
This is necessary in order not to run into a very slow algorithm for automatically aligning the width and height of the cells. But problems with internal content immediately begin. If the text does not fit in a cell, it will "fall out" outside of it. Solved by overflow: hidden . At the same time, a mechanism for manually resizing the cells will be required.
2. Headers separately, data separately
The data and headings to them are divided into several tables. This allows you to scroll not a piece of the table, but the entire table inside the container.
3. Explicit height
overflow-y: autorequires a fixed height of the container in which the content will be scrolled. For everything to work well, you need to remember about the onresize event of the window, because when the browser is resized, everything will “break”
On its own. I did a manual resizing of the cell width, as it seemed to me, in a "cunning" way. Since the table is cut into several physical ones (headers and data), I assigned the cell_n class to each TD/TH in the first TR , where n is the cell index. Then I created a dynamic stylesheet in which I described these classes. And when resizing, I just changed the value of widthin class. At that time, the idea seemed great to me, but the real performance of this solution is low, lower than that of inline specifying the width of the desired cell.

Answer 3

The easiest option is to clone the necessary data in JS (jQuery, for example), put it on top of the table and fix it in CSS.

Answer 4

Tried to do something with jquery. it didn't work out in the best way.
I decided to bind to the css top of each cell (thanks to this, you can fix not just a column, but individual cells)
firstly - for some reason, the horizontal scroll bar appears only by scrolling down a little o_O although if you scroll through, for example, a touchpad (horizontal scroll), you can see that the table does not fit into the document and everything works as it should.
second, the delay. cells are moved after the scroll() event fires, and therefore they somehow catch up.
One way or another, maybe based on what I got there, you will be able to make something more presentable (: