HTML table with horizontal scrollbar on first column-CodePudding

I'm working on a HTML table where you can insert the desired quantity for each color of a certain size. I've created the following JSFiddle where you can see the current situation: https://jsfiddle.net/xv02b5c7/43/.

When you resize your screen until the columns are not fitting anymore, the table becomes horizontally scrollable. What I'm trying to achieve is that the size, price and total columns always remaining visible on the right (without the need to scroll to the right) and that only the first column with the quantity input fields become scrollable. That means that some of the color names with their inputs aren't visible until you scroll to the right.

Would this be possible? I don't want to have the first column of each table row individually scrollable, this would be easily possible by setting a maximum width on the first column of each table row.

CodePudding user response：

Alright I got it

The solution is to spit it up into two separate tables and separate divs

<div id="left-side">
  <table>
    <!-- The Quantity section separated -->
  </table>
</div>
<div id="right-side">
  <table>
    <!-- The Size Price Total section separated -->
  </table>
</div>

Along with some css. Not going to post the css here now, might edit later.
Fiddle: https://jsfiddle.net/evj0mbdt/5/