Currently facing a dilemma here. I developed a booking system for a client and didn't prioritize making it responsive. However, the need for responsiveness arose last week. I thought my code was prepared for this, but turns out it's not as responsive as needed. The goal for mobile and tablets is to keep the left and right columns fixed while allowing scrolling/swiping for the ones in between.
You can take a look at the development link here: example
As shown in the example, the very left column displays booking information, and the far right column contains the proceed button. These are the columns that should remain fixed. Is there a way to achieve this using CSS only? I have a lot of JavaScript already implemented and would like to exhaust all CSS options before turning to more scripting.
Any assistance on this matter would be highly appreciated.
EDIT I've managed to add a set width to the first and last columns using:
td:first-child
td:last-child{
width:120px;
}
This is a good start, but the middle columns become squished on smaller screens, affecting usability and readability. I'm aiming for some kind of horizontal overflow to enable users to scroll or swipe on mobile and tablet devices.