gpt4 book ai didi

javascript - 如何使用 CSS/JS 或 jquery 让文本随滚动在 colspan 中 float ?

转载 作者:行者123 更新时间:2023-11-28 04:14:37 24 4
gpt4 key购买 nike

我有一个响应表,它位于 bootstrap 4 容器 lg-8 中,并且正在滚动到右侧。一切顺利。

我在嵌套表头中有一个 colspan,我想让这个 colspan 单元格中的文本 float 到可见的一侧,并在用户向右移动时跟随滚动。

我想我必须在这里处理一个 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">&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>
<

最佳答案

包含文本的 div 必须具有 宽度,然后您只需使用 overflow

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

更好的做法是让 div 取容器的宽度(容器必须是一个 block )。您设置容器的宽度,然后在 div 上设置 width: 100%

关于javascript - 如何使用 CSS/JS 或 jquery 让文本随滚动在 colspan 中 float ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42538526/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com