HTML table with two sticky columns and headers (using only CSS)

I'm struggling to get two fixed columns and headers using a HTML table + scrollable body. I've searched a lot and found these approaches:

• this (only 1 fixed column/header)
• and this (only 1 fixed column/header; no table markup)
• and I've also created my own solution using a library, which works fine, but I don't like how the html table tag markups getting messed up & moreover initializing the colModal is not that good since I've a dynamic amount of columns.

Since I am not satisfied with any of these solutions, I would like to know if there is a chance to get this job done only using CSS?

I don't think that it's possible to achieve what I want only using CSS. So I've found another library called TableHeadFixer which does not duplicate nodes and IDs in your HTML markup.

So I came up with this final solution: https://jsfiddle.net/4s53f124/2/

All you have to do is to call the tableHeadFixer method of the library (and if you want to some CSS adjusting):

 $(document).ready(function () {
     $("#fixTable").tableHeadFixer({"left": 2});
 });