How To Freeze HTML Table Columns and Rows with CSS

Having a freeze panes effect on HTML Table. Fixed/Frozen the Columns and Rows of HTML Table without JavaScript and Jquery.

Editor: Visual Studio Code
Screen Recorder: OBS Studio

Shortcut Key:
Auto Align/Auto-Formatting HTML tags: [Alt] + [Shift] + [F]

Source Code / Example:

Example 1: Youtube Version

Example 2: Fixed width & height

Example 3: Responsive width & height (adjusted by using viewport)

Tutorial Articles:

[weiang]

Brilliant! Thanks for sharing this step-by-step tutorial, exactly what I was looking for - an excel like freeze row and column behavior in html, would have taken me days if not weeks to figure it out!

[elijahmorishita]

Exactly what I was looking for, well done and thanks!

[eyewisholio]

I coudn't find anywhere for this solution. finally end up here. Thanks ton.

[dariakuzmina]

Very simple and helpful! Solution beat chatGPT thousand times! Lots of thanks!

[julienv]

Hello good sir, I've been struggling so much for doing this on my own ! Thank you very much :)

[rpais]

Congratulations for the tutorial, really good!

[ffpv]

Thank you for sharing your knowledge !

[priyasuryawanshi]

How to make the 3rd column freeze.what would be the left

[MargaretABartley]

thank you. What program are you writing with?

[spidey]

Please Tell him to freeze first 2 rows with fixed header ??

[sarthakmhalsekar]

Bro speak someone should understand it