prevent Vertical scroll but allow Horizontal scroll

Question

I currently have a small agenda with a dayview

when my dynamic table starts to have a lot of <td> 's, a horizontal scrollbar apears but when the user scrolls to the right, he no longer has visual on what time he's actually selecting. I've created a small example shown in the snippet.

 #container{ width: 400px; height:250px; border:1px solid black; overflow-x:auto; white-space:nowrap; position:relative; } table{ border:1px solid black; border-collapse:collapse; } table th{ padding: 8px; border: 1px solid #ddd; margin:0; display:block; } table td{ padding: 8px; border: 1px solid #ddd; min-width: 150px; min-height: 18px; display:inline-block; } table tr:nth-child(even){background-color: #f2f2f2;} table tr:hover {background-color: #ddd;} .secondTable{ border-left: none !important; } .firstTableCon{ margin-left:100px; margin-top:50px; position:relative; } .tableContainer{ display:inline-block; } #absoluteContainer{ /* position:absolute; */ } #timeTable{ /* position:fixed; */ }

 <div id="container"> <div class="tableContainer firstTableCon"> <div id="absoluteContainer"> <table id="timeTable"> <tr> <th> 8:00 </th> </tr> <tr> <th> 9:00 </th> </tr> <tr> <th> 10:00 </th> </tr> <tr> <th> 11:00 </th> </tr> <tr> <th> 12:00 </th> </tr> <tr> <th> 13:00 </th> </tr> <tr> <th> 14:00 </th> </tr> <tr> <th style="border:0px;"> 15:00 </th> </tr> </table> </div> </div> <div class="tableContainer"> <table class="secondTable"> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td style="border:0px;"> </td> </tr> </table> </div> </div>

I'd like the table that shows what time you're selecting (a vertical table) to scroll with the screen to the right, but maintain position when scrolling up or down.

preferable a css solution but if Javascript is the only option I'd be forced to use that.

Before this gets flagged as duplicate, I've seen the other question Here and tried the fiddles BUT they did not work in the way I wanted

Answer 1

In this case, you may need to use position: sticky with left: 0 on .firstTableCon :

 #container{ width: 400px; height:250px; border:1px solid black; overflow-x:auto; white-space:nowrap; position:relative; } table{ border:1px solid black; border-collapse:collapse; } table th{ padding: 8px; border: 1px solid #ddd; margin:0; display:block; } table td{ padding: 8px; border: 1px solid #ddd; min-width: 150px; min-height: 18px; display:inline-block; } table tr:nth-child(even){background-color: #f2f2f2;} table tr:hover {background-color: #ddd;} .secondTable{ border-left: none !important; } .firstTableCon{ margin-left:100px; margin-top:50px; position: -webkit-sticky; position: sticky; left: 0; } .tableContainer{ display:inline-block; } #absoluteContainer{ /* position:absolute; */ } #timeTable{ /* position:fixed; */ }

 <div id="container"> <div class="tableContainer firstTableCon"> <div id="absoluteContainer"> <table id="timeTable"> <tr> <th> 8:00 </th> </tr> <tr> <th> 9:00 </th> </tr> <tr> <th> 10:00 </th> </tr> <tr> <th> 11:00 </th> </tr> <tr> <th> 12:00 </th> </tr> <tr> <th> 13:00 </th> </tr> <tr> <th> 14:00 </th> </tr> <tr> <th style="border:0px;"> 15:00 </th> </tr> </table> </div> </div> <div class="tableContainer"> <table class="secondTable"> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td style="border:0px;"> </td> </tr> </table> </div> </div>

Answer 2

You can add overflow-y:hidden; in container

 #container{ width: 400px; height:250px; border:1px solid black; overflow-x:auto; white-space:nowrap; position:relative; overflow-y:hidden; } table{ border:1px solid black; border-collapse:collapse; } table th{ padding: 8px; border: 1px solid #ddd; margin:0; display:block; } table td{ padding: 8px; border: 1px solid #ddd; min-width: 150px; min-height: 18px; display:inline-block; } table tr:nth-child(even){background-color: #f2f2f2;} table tr:hover {background-color: #ddd;} .secondTable{ border-left: none !important; } .firstTableCon{ margin-left:100px; margin-top:50px; position:relative; } .tableContainer{ display:inline-block; } #absoluteContainer{ /* position:absolute; */ } #timeTable{ /* position:fixed; */ }

 <div id="container"> <div class="tableContainer firstTableCon"> <div id="absoluteContainer"> <table id="timeTable"> <tr> <th> 8:00 </th> </tr> <tr> <th> 9:00 </th> </tr> <tr> <th> 10:00 </th> </tr> <tr> <th> 11:00 </th> </tr> <tr> <th> 12:00 </th> </tr> <tr> <th> 13:00 </th> </tr> <tr> <th> 14:00 </th> </tr> <tr> <th style="border:0px;"> 15:00 </th> </tr> </table> </div> </div> <div class="tableContainer"> <table class="secondTable"> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td style="border:0px;"> </td> </tr> </table> </div> </div>