HTML table with multiple fixed rows and columns

Question

I have a table like this:

Goal Table

Now, in reality, there would be in excess of 100 rows and/or columns. Naturally, in such a table, someone might lose track of what they're looking at. So I'd like a couple (or more) rows and columns to stay fixed in their positions, while only the remaining part of the table scrolls. (So in the picture it'd be only the Cells containing 'Data' should scroll, the rest should stay in place.)

I've tried a couple plugins and they either failed miserably for some reason or were too slow for large tables.

So I'm asking here, is there a way to do this simply through CSS/html/js? Even if it is complicated. The table would be wrapped in a position: relative div if this matters at all.

Even tho code would be very welcome, I am also open to suggestions. (Kind of new to the whole front end part).

if i understood your question this is a post talk about fixed table: fixed table — Ferdinando
– Ferdinando, Commented Oct 31, 2018 at 18:35

Aditya Jangid · Accepted Answer · 2018-10-31 19:19:32Z

0

You could use DataTables. Here's a link https://datatables.net/examples/styling/bootstrap4

answered Oct 31, 2018 at 19:19

Aditya Jangid

1041 gold badge1 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

HTML table with multiple fixed rows and columns

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related