Question

一些背景

我正在使用Gridster小部件用于网页。这些小部件显示在HTML表格下方。该表格有助于识别每个小部件的一些信息。小部件是放置在{{1中的html <ul>元素}}

小部件是从json动态生成的。（因此它们的数量不固定）

我想要的输出

由于小部件是动态生成的，因此可能有太多小部件。当发生这种情况时，网页变得太大，用户无法看到HTML表。

所以我想要的是小部件在哪里应该滚动，HTML表固定在它的位置

因此，即使用户想要查看底部的小部件，他也可以看到HTML表格

到目前为止我尝试了什么

我为小部件所在的部分制作了<div>并将属性overflow:scroll提供给他们。但即便如此，它仍然没有按照我期望的方式工作

我的HTML

<div class="content-wrapper">
    <div class="row">
      <div class="col-md-12 grid-margin stretch-card">
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">My Webpage</h4>
           <p class="card-description" style="color:black;">
                      Zone for Gasoline:A, Year :2018
            </p>
            <div class="row">
             <div class="col-md-12">
              <div class="btn-group btn-block mb-4" aria-label="steps">
                     <div class="col md-4">
                        <a href="/app/step-1/"> <button type="button" class="btn btn-block btn-outline-secondary"> Step 1 </button> </a>
                         </div>
                <div class="col md-4">
                        <a href="/app/step-2/"> <button type="button"  class="btn btn-block btn-outline-secondary" > Step 2  </button> </a>
                      </div>
                 <div class="col md-4">
                        <a href="/app/step-3/"> <button type="button" class="btn btn-block btn-primary"> Step 3 </button></a>
                </div>
               </div>
              </div>
            </div>


  <table border = "1" class=".table-responsive">
     <tr>
        <th colspan="4"  style="background-color:#eedd82;">Zone 1</th>
        <th colspan="4"  style="background-color:#eedd82;">Zone 2</th>
        <th colspan="4"  style="background-color:#eedd82;">>Zone 3</th>
     </tr>
     <tr>
        <td width="400" align="center" style="background-color:#0085ca">T1</td>
        <td width="400" align="center" style="background-color:#0085ca">T2</td>
        <td width="400" align="center" style="background-color:#0085ca">T3</td>
        <td width="400" align="center" style="background-color:#0085ca">T4</td>
        <td width="400" align="center" style="background-color:#0085ca">T1</td>
        <td width="400" align="center" style="background-color:#0085ca">T2</td>
        <td width="400" align="center" style="background-color:#0085ca">T3</td>
        <td width="400" align="center" style="background-color:#0085ca">T4</td>
        <td width="400" align="center" style="background-color:#0085ca">T1</td>
        <td width="400" align="center" style="background-color:#0085ca">T2</td>
        <td width="400" align="center" style="background-color:#0085ca">T3</td>
        <td width="400" align="center" style="background-color:#0085ca">T4</td>
     </tr>
 </table>

 <!--Gridster widgets will appear here below table-->
 <div class="gridster father">
      <ul class="child">

      </ul>
</div>

我很抱歉这么大的HTML代码。在HTML中你可以看到<table>下面的father <div>和child <ul> 1}}元素。

对于他们两个我尝试了以下CSS（单独和组合方式）

.father{
    overflow:scroll;
  }

.child{
    overflow:scroll;
  }

但我没有给出＃34;滚动＆＃34;我想要的效果

Fiddle代表相同的

任何帮助都将非常感激

Answer 1

假设您希望应用滚动以在较小的显示器（例如手机）上启用响应行为，则应将溢出滚动应用于表的父级以启用滚动，如此

<强> HTML：

<div class="parent">
    <ul class="child">
        ...
    </ul>
</div>

CSS：

.parent {
    overflow: scroll;
}

为了获得更好的响应体验，我们可能只希望这种滚动从左到右（y轴）而不是从上到下（x轴）我们需要设置它，因此需要相应地调整我们的CSS

.parent {
    overflow-y: scroll;
}

在您的示例中，看起来父类和子类被应用于网格构建，作为无序列表（<ul>），其中包含小车图标。这个<ul>定义了高度和与父母一起使用，因此在一个足够大的窗口中，表格不会被滚动。如果压缩窗口，则父元素仅扩展到窗口的宽度，这是div的预期行为。此时，子元素会滚动。

如果您希望将相同的行为应用于.table-responsive元素，则需要应用相同的原则。将表包装在父表中并相应地应用溢出。您不希望将overflow-scroll放在表格本身上，但您可能希望为表格提供最小宽度或应用固定宽度，例如width: 300px;

<强> HTML：

<div class="parent">
    <table class="table-responsive">
        ...
    </table>
</div>

CSS：

.parent {
    overflow-y: scroll;
}
.table-responsive {
    your styles
}

如果您需要修复父级的尺寸，以便元素不定义窗口的大小，您可以使用CSS执行类似的操作

.parent {
    overflow: scroll;
    width: 400px;
    max-width: 100vw;
    height: 400px;
    max-height: 100vh;
}
.table-responsive {
    your styles
}

在这种情况下，您的宽度理想情况下宽度为400px，但绝不会超过视口宽度，也不会超过400px高，但绝不会超过视口高度。如果你想让你的身高更加聪明，你可以使用calc获得最大高度，这样该窗口就不会超过特定的高度，同时考虑到页面上的其他元素。

Answer 2

响应表不是那样写的。它是这样的：

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

在父div中滚动子div

2 个答案: