Wie lassen Sie einen Text mit scroll in einem Colspan schweben mit CSS/JS oder jquery?

Question

Ich habe eine reaktionsschnelle Tabelle, die in einem Bootstrap 4 Container lg-8 ist und es ist auf der rechten Seite scrollen. Alles gut.

Ich habe ein Colspan in einem geschachtelten Tabellenheader und möchte den Text innerhalb dieser Colspan-Zelle zur sichtbaren Seite schweben lassen und der Rolle folgen, wenn der Benutzer nach rechts geht.

Ich denke, ich muss mich hier mit einem Div beschäftigen, aber ich bin mir nicht sicher.

Unten ist mein Code-Schnipsel:

#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

Die div Sie den Text haben in einer width haben müssen und dann nur Sie overflow verwenden.

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

Besser noch ist für das div, die Breite des Containers (der ein Block sein muss) zu nehmen. Sie legen die Breite des Containers und dann width: 100% auf der div.