0
我有一個響應表，它是在一個引導4容器lg-8，它是滾動到右側。都好。如何讓文本在使用CSS/JS或jQuery的colspan中滾動？
我在嵌套的表格標題中有一個colspan，並且希望讓這個colspan單元格內的文本浮動到可見側，並在用戶進入正確的時候跟隨滾動。
我想我必須在這裏處理一個div，但我不確定。
下面是我的代碼片段：
#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"> </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>
<
在我的代碼中不起作用。 – Chris