I am currently utilizing Bootstrap 4. I have a complex table structure where I want only the second column and onward to be scrollable. The challenge is making this specific part of the table responsive while keeping the rest static. I attempted to nest a table within a table, with everything from the second column onwards wrapped in a table-response div. Unfortunately, this approach did not achieve the desired responsiveness. It seems that the entire table needs to be marked as responsive for it to work correctly.
My goal is to create a scrollable table, with the ID wannabe-responsive, that maintains its responsiveness, while the first table with the ID not-responsive remains fixed. I have tried various CSS adjustments without success. Here is the current code structure:
.item {
min-height: 350px;
border: 1px solid #000;
margin-bottom: 20px;
background: #f2f2f2
}In the code snippet above, you can see my attempt to style the table content. I have included a link to a JS Fiddle to demonstrate my progress so far. While I have made some improvements, I am still facing issues with the table content overflowing the container. I will continue to update as I make further advancements.
Update: Adding the container class to the <td> container of the response table has improved the responsiveness. However, I am still struggling with data overflowing outside the main container. I am actively working on resolving this issue and will provide updates.
Update 2: Feel free to review my progress on the JS Fiddle link. I have almost achieved the desired functionality, but I am encountering difficulty with the content being cut off at the end. When you run the fiddle, you will notice that the time slots are truncated, along with the end of the scroll bar on small screens. My objective is to ensure that the entire scroll bar is visible at the bottom at all times, and that all time slots are fully viewable while scrolling.
Current display: https://i.sstatic.net/FWCr9.png
As shown in the image, both the end time slots and the scroll bar are being cut off. I appreciate any assistance in overcoming this final hurdle!