Iteratively hide the last column of a html table using css/javascript

Iteratively hide the last column of a html table using css/javascript

I am attempting to modify a table created by xx user through Sharepoint
with responsive design in mind. What I want to do is iteratively hide the
last visible column in the table based on the width of the screen.
For example: a user creates a 10-column table and the max screen size is
1200. If they minimize the window to 600px, then the last 5 columns should
not be shown. If they minimize the window to 800px, then the last 3
columns should not be shown.
Currently I can selectively remove columns with CSS using display:none on
the :nth-child, but that doesn't account for whether or not the display is
already set to none in order to move on to the n-1-child.
Is there a way to do this with CSS, or is this concept limited to
Javascript? And if so, how?
Thank you.