How to make a table responsive?

Question

css

Please tell me how to make this table adaptive?
https://jsfiddle.net/vrwgzw64/1/ (conditional example)
With a small extension, the data does not fit and you need to somehow rebuild the table, please tell me which approach to use.
I originally wanted to use Flexbox for tables, but as I understand it, there is no way to automatically adjust the width of headers and cells based on content :( (as table does)

Answer 1

https://codepen.io/AllThingsSmitty/pen/MyqmdM
google responsive table css and responsive table javascript

Answer 2

For me, everything is so simple - a table is a table. I don’t see the point in perverting with her appearance into some incomprehensible forms. I usually wrap the table in a DIV and set the style rules:

white-space: nowrap;
overflow-x: auto;

PS
The only thing that can be done additionally on mobile devices is to add a block to the entire height of the table on its right side (translucent gradient). You can see a similar implementation, for example, in a google search in the menu below the text input field.