Make `<table>` elements responsive automatically

Make <table> elements responsive to handle small screen devices on the x-axis.

There are poor hacks to make <table> elements responsive such as this:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_table_responsive

However, let's say we have a table with 100 rows and 25 columns on a single page.

7 out of 25 columns are only showing on a small screen device.

The user is viewing the table on a small screen device and half the table is hidden and hanging out of the right hand side of the screen.

A user scrolls down to row 50 of the 100 row table.

The user needs to scroll down to the bottom of the table to scroll the x-axis scroll bar to move the table right to see the missing right hand side data.

Then the user needs to navigate back up the page to row 50 to view the data.

This is a poor ux.

It would be better for <table> elements to be fully responsive and give better ux for people using the mouse or touch screen devices.

A better solution would be to allow users to grab the table at the desired row and be able to move the whole table, instead of needing to go down to the bottom of the web page and use the scroll bar.

This feature can be turned on and off by adding an attribute to the <table> element, maybe?

The attribute can control turning on the scrollbar and the grab function without the developer needing to wrap the <table> element with a <div> tag and adding extra css.

No repository files or tests are named. Start by reviewing the linked W3Schools responsive-table example and the screenshots/GIF, then define the proposed table attribute and interaction behavior; done should mean users can access the full table horizontally from the row they are viewing on small screens.