如何使用CSS / JS或jquery在colspan中滚动滚动文本？

Question

i have a responsive table which is in a bootstrap 4 container lg-8 and it is scrolling to the right side. All good.

I have a colspan in a nested table header and want to let the text within this colspan cell float to the visible side and follow the scroll when the user goes right.

I think i have to deal with a div here, but i am not sure.

Below is my snippet:

 #table2 th+th, #table2 td+td { border-left: 2px solid #F5F5F5; font-size: 0.75vw; } #table2 th, #table2 td { font-size: 0.75vw; } .tableinfoTime { Width: 60px; } .tableinfo { Width: 52.3px; } .scheduleHeader { Width: 52px; } .scheduleHeaderTop { Width: 52.3px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="col-lg-8" style="background-color: grey;"> <label>Table assignment Schedule</label> <!-- right container --> <div id="right"> <h6 style="font-size:1vw; ">Search by any table</h6> <input style="margin-top:0.5em margin-bottom: 0.5em;" class="form-control" type="text" id="reservationManagerListTableNumberInput" placeholder="Search for any table.. "> <table class="table table-responsive table-sm table-hover" style="margin-top:0.5em;" id="table2"> <thead class="header"> <tr> <!-- if checkbox is checked, clone reservation subjects to the whole table row --> <th> <div class="scheduleHeaderTop"> <input id="week" type="checkbox" title="Preassign Table by drag and drop Reservation in each slot" checked/> <input id="report" type="checkbox" title="Show Assignment report" /></div> </th> <th> <div class="scheduleHeaderTop">Ttl Tbl.</div> </th> <th> <div class="scheduleHeaderTop">Ttl Res.</div> </th> <th> <div class="scheduleHeaderTop">Ttl Pax</div> </th> <th> <div class="tableinfoTime">11:00</div> </th> <th> <div class="tableinfoTime">11:30</div> </th> <th> <div class="tableinfoTime">12:00</div> </th> <th> <div class="tableinfoTime">12:30</div> </th> <th> <div class="tableinfoTime">13:00</div> </th> <th> <div class="tableinfoTime">13:30</div> </th> <th> <div class="tableinfoTime">14:00</div> </th> <th> <div class="tableinfoTime">14:30</div> </th> <th> <div class="tableinfoTime">17:00</div> </th> <th> <div class="tableinfoTime">17:30</div> </th> <th> <div class="tableinfoTime">18:00</div> </th> <th> <div class="tableinfoTime">18:30</div> </th> <th> <div class="tableinfoTime">19:00</div> </th> <th> <div class="tableinfoTime">19:30</div> </th> <th> <div class="tableinfoTime">20:00</div> </th> <th> <div class="tableinfoTime">20:30</div> </th> <th> <div class="tableinfoTime">21:00</div> </th> <th> <div class="tableinfoTime">21:30</div> </th> <th> <div class="tableinfoTime">22:00</div> </th> </tr> </thead> <tbody class="reservationManagerScrolltbody"> <tr> <td colspan="24" class="reservationManagerTableType"> <table class="table table-responsive table-fixed table-sm waiterStationtableinfoTime"> <thead class="header"> <tr> <th> <div class="scheduleHeader">Table Number</div> </th> <th> <div class="scheduleHeader">Table Type</div> </th> <th> <div class="scheduleHeader">Reservation Assigned</div> </th> <th> <div class="scheduleHeader">Guest Assigned</div> </th> <th colspan="20" style="text-align:center;"> Waiterstation 1</th> </tr> </thead> <tbody> <tr> <td> <div class="scheduleHeader">146</div> </td> <td> <div class="scheduleHeader">2 TOP</div> </td> <td> <div class="scheduleHeader">6</div> </td> <td> <div class="scheduleHeader">16</div> </td> <td> <div class="tableinfoTime">&nbsp;</div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> </tr> <tr> <td> <div class="scheduleHeader">147</div> </td> <td> <div class="scheduleHeader">2 TOP</div> </td> <td> <div class="scheduleHeader">6</div> </td> <td> <div class="scheduleHeader">16</div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> </tr> <tr> <td> <div class="scheduleHeader">148</div> </td> <td> <div class="scheduleHeader">2 TOP</div> </td> <td> <div class="scheduleHeader">6</div> </td> <td> <div class="scheduleHeader">16</div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> </tr> <tr> <td> <div class="scheduleHeader">149</div> </td> <td> <div class="scheduleHeader">2 TOP</div> </td> <td> <div class="scheduleHeader">6</div> </td> <td> <div class="scheduleHeader">16</div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> </tr> </tbody> </table> </td> </tr> <tr> <td colspan="24" class="reservationManagerTableType"> <table class="table table-responsive table-fixed table-sm waiterStationtableinfoTime"> <thead class="header"> <tr> <th> <div class="scheduleHeader">Table Number</div> </th> <th> <div class="scheduleHeader">Table Type</div> </th> <th> <div class="scheduleHeader">Reservation Assigned</div> </th> <th> <div class="scheduleHeader">Guest Assigned</div> </th> <th colspan="20" style="text-align:center;"> Waiterstation 2</th> </tr> </thead> <tbody> <td> <div class="scheduleHeader">230</div> </td> <td> <div class="scheduleHeader">2 TOP</div> </td> <td> <div class="scheduleHeader">6</div> </td> <td> <div class="scheduleHeader">16</div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <tr> <td> <div class="scheduleHeader">231</div> </td> <td> <div class="scheduleHeader">2 TOP</div> </td> <td> <div class="scheduleHeader">6</div> </td> <td> <div class="scheduleHeader">16</div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <tr> <td> <div class="scheduleHeader">232</div> </td> <td> <div class="scheduleHeader">2 TOP</div> </td> <td> <div class="scheduleHeader">6</div> </td> <td> <div class="scheduleHeader">16</div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> </tr> <tr> <td> <div class="scheduleHeader">233</div> </td> <td> <div class="scheduleHeader">2 TOP</div> </td> <td> <div class="scheduleHeader">6</div> </td> <td> <div class="scheduleHeader">16</div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> <td> <div class="tableinfoTime"></div> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> < 

Answer 1

The div you have the text in must have a width and then you just use overflow .

.myDiv {
   width: 20px;
   overflow-x: auto;
   overflow-y: hidden;
 }

Better still is for the div to take the width of the container (which must be a block). You set the width of the container and then width: 100% on the div.