如何使用CSS / JS或jquery让文本随卷轴浮动？

Question

我有一个响应表，这是在一个引导4容器lg-8，它是滚动到右侧。一切都很好。

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

我想我得在这里处理一下，但我不确定。

下面是我的片段：

​

#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

您的文本所在的div必须有一个width，然后只使用overflow。

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

更好的做法是由div获取容器的宽度(必须是块)。您可以设置容器的宽度，然后在div上设置width: 100%。