twitter-bootstrap - Bootstrap 4.1 固定 div，带 overflow-y 和全宽-6ren

twitter-bootstrap - Bootstrap 4.1 固定 div，带 overflow-y 和全宽

转载作者：行者123 更新时间：2023-11-28 01:30:00

我尝试用两个表制作两个列。右表必须固定且自动溢出。但如果我这样做，表格的宽度将不是 col 的 100%(col 的全宽)。我正在使用 Bootstrap 4.1。也许有任何 Bootstrap 解决方案可以做到这一点？还是别的？

它是如何工作的:当用户在左表中选择某行时，所有额外的数据将被加载并显示在右表中。

#table_div {
  position: fixed;
  height: 100vh;
  overflow: auto;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="container">
  <div class="row my-3">
    <div class="col-6">
      <table class="table table-sm table-hover">
        <thead>
          <tr>
            <th scope="col">r1</th>
            <th scope="col">r2</th>
            <th scope="col">r3</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="col-6">
      <div>
        <div id="table_div">
          <table class="table table-sm table-hover" id="my_table">
            <thead>
              <tr>
                <th scope="col">r1</th>
                <th scope="col">r2</th>
                <th scope="col">r3</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
              </tr>
              <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
              </tr>
              <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
              </tr>
              <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
              </tr>
              <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
              </tr>
              <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
              </tr>
              <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
              </tr>
              <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
              </tr>
              <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
              </tr>
              <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
              </tr>
              <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
              </tr>
              <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
              </tr>
              <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
              </tr>
              <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
              </tr>
              <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
              </tr>
              <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
              </tr>
              <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
              </tr>
              <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
              </tr>
              <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div></div>
      </div>
    </div>
  </div>
</div>

真实数据 - https://jsfiddle.net/hdb1783y/4/

最佳答案

在所需的 div 和此样式上添加了 abc 类

.abc {
  max-height: 100vh;
  overflow: auto;
  position: fixed;
  width: 50%!important;
}

.abc {
  max-height: 100vh;
  overflow: auto;
  position: fixed;
  width: 50%!important;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="container">
  <div class="row my-3">
    <div class="col-6">
      <table class="table table-sm table-hover">
        <thead>
          <tr>
            <th scope="col">r1</th>
            <th scope="col">r2</th>
            <th scope="col">r3</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="col-6">
      <div>
        <div id="table_div" class="abc">
          <table class="table table-sm table-hover" id="my_table">
            <thead>
              <tr>
                <th scope="col">r1</th>
                <th scope="col">r2</th>
                <th scope="col">r3</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
              </tr>
              <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
              </tr>
              <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
              </tr>
              <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
              </tr>
              <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
              </tr>
              <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
              </tr>
              <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
              </tr>
              <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
              </tr>
              <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
              </tr>
              <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
              </tr>
              <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
              </tr>
              <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
              </tr>
              <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
              </tr>
              <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
              </tr>
              <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
              </tr>
              <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
              </tr>
              <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
              </tr>
              <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
              </tr>
              <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div></div>
      </div>
    </div>
  </div>
</div>

关于twitter-bootstrap - Bootstrap 4.1 固定 div，带 overflow-y 和全宽，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51042370/

文章推荐： c++ - 找不到-lMagick++-6.Q16

文章推荐： javascript - 在 Backbone View 中编写下拉菜单

css - overflow-x 和 overflow-y 不会覆盖 overflow
我正在使用 bootstraptable 并试图让单元格显示溢出的内容但只显示向下(即 overflow-y)。问题是，bootstraptable css 使用 overflow: hidden o
css - `overflow-block` 和 `overflow`(和 `block-overflow`)有什么区别？
来自文档:溢出: The overflow shorthand CSS property sets what to do when an element's content is too big to
html - overflow-x 也隐藏了 overflow-y
有多个这样命名的问题，但我没有找到一个适用于我的情况，所以我在这里: 在这段代码中: #container:hover { overflow-x: hidden; } #container {
haskell - *** 异常 : stack overflow : Stack overflow
我正在学习 Haskell，但遇到了我没想到的异常“堆栈溢出”。代码相当简单: type Reals = Double prod :: Reals -> Reals -> Reals prod a
CSS Overflow-x 隐藏和 Overflow-y
我通读了this question并且没有看到我的问题是否有解决方案。我创建了一个 CodePen这表明了这个问题。我希望隐藏红色边框左侧和右侧 (overflow-x) 的所有内容，但保持顶部和底
overflow - Bootstrap 4 : hide overflow in card-text
我有一张 bootstrap 4 卡，我想在其中隐藏字幕的溢出(并显示“...”)。我怎样才能实现这个目标？如果可能的话使用纯引导代码... Test object Added by
flutter :没有名称为 'overflow' 的命名参数，溢出:Overflow.visible，
我今天更新了我的 flutter ，现在堆栈小部件中的溢出参数不再有效。 Flutter 1.22.0-10.0.pre.252 • channel master • https://github.c
overflow - 最新歌剧在使用 border-radius 属性时不会 overflow hidden
使用 border-radius Opera 实际上不会隐藏元素的溢出部分。我已经尝试应用我设法在类似线程中找到的东西，例如定义边框样式或注意使用绝对和相对参数进行定位。但它仍然无法正常工作。 htm
javascript - 如何拆分 overflow-x 和 overflow-y
我在固定大小的 div 中有一个表。如果表格溢出 div，我希望滚动条出现。我还想在向下滚动时克隆表格的标题，以便标题持久存在。我遇到的问题是我希望水平滚动条滚动克隆的标题和原始表格，而垂直滚动条
CSS overflow-x 和 overflow-y 没有得到广泛支持？
奇怪，我以为 overflow-x 和 overflow-y 都被广泛支持，但后来我才看到它只支持 CSS3( http://reference.sitepoint.com/css/overflow
c++ - 欧拉计划 :#14 Integer overflow and Stack overflow
unsigned long long terms; unsigned long long test; unsigned long long digit = 1; unsigned long long
html - overflow-x 滚动和 overflow-y 可见
我有一个案例，我必须使用 overflow-x:scroll; 水平显示内容。现在在这个Fiddle第一个 block 有 overflow-y:scroll; 提供滚动，用户可以滚动内容。在第二个
html - 应该只使用 overflow-x 而不是 overflow-y
您好，我正在尝试只使用 overflow-x 而不是 overflow-y 结构是这样的 Head1 feild1
Java、Intellij : Replacing numeric overflow expression with one which doesn't overflow
我有一个正在运行的计划作业，我想计算过去 30 天的时间。为此，我收到一条警告，表示在表达式中检测到数字溢出。我怎样才能安全地给予 30 天？ @Override @Scheduled(cro
html - 如何让 `overflow-x` 代替 `overflow-y` 工作？
我有一个父级，它有多个子级，当父级宽度溢出时，我喜欢显示水平滚动条。我不想使用“display:inline-block”属性，因为它们之间会产生空白。这是我的尝试: .parent{ wid
javascript - 如何使 overflow-y 独立于 overflow-x 运行
我正在为导航栏编写一些 CSS，我需要为下拉菜单使用 max-height 和 overflow-y: scroll 以便确保它适合页面。但是，每当我将 overflow-y 属性设置为滚动时，它似乎
html - CSS : Overflow-x: hidden, Overflow-y:在带有下拉菜单的轮播中可见
这是我的问题。我有一个旋转木马，它也像菜单一样。当选项卡的数量高于浏览器可用的宽度空间时，将出现轮播控件。一切正常。但我还在每个选项卡上添加了一个下拉菜单，这就是问题所在。如果我设置 overflow
css - overflow-x 和 overflow-y 属性，它们应该如何工作？
这个问题在这里已经有了答案: CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue (10 个答案) 关
html - 为什么一个元素随着 "overflow: visible"消失但随着 "overflow: hidden"可见？
这个问题在这里已经有了答案: How do you keep parents of floated elements from collapsing? [duplicate] (15 个答案) W
html - 有一个 overflow-x 的 overflow-y 元素
这是一个代码片段: div.one { width: 98%; border: 5px solid black; overflow-x: visible; overflow-y: hi

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

twitter-bootstrap - Bootstrap 4.1 固定 div，带 overflow-y 和全宽