有一个引导表单元格填充可用区域，溢出时滚动
Posted
技术标签:
【中文标题】有一个引导表单元格填充可用区域，溢出时滚动【英文标题】：Have a bootstrap table's cell fill available area, scrolling on overflow 【发布时间】：2019-10-10 05:42:00 【问题描述】：所以有很多关于 Bootstrap 和 Tables 以及响应性的问题，但我发现的所有问题似乎都只涉及 Table 滚动或填充可用区域。
我无法让特定的单元格（<td> 元素）
(a) 填充到可用空间，在窗口边界处停止（例如：流动）和
(b) 如果单元格太大，则添加水平滚动条。
目标：
尽力而为
这是我到目前为止所得到的。注意事项：
我没有使用任何自定义 CSS，仅使用 Bootstrap 4.1.3 提供的那些 您会看到<div class="table-responsive"> 已被注释掉 - 这是因为我不希望 整个表格 可滚动。
<pre class="pre-scollable">部分在日志多行时成功添加垂直滚动条，但是没有添加水平滚动条
我尝试将 results-log 单元格包装在引导程序 class="container-fluid" div 中，但这并没有真正起到任何作用。
如果我使用<pre class="pre-scollable" style="width: 250px; overflow-x: scroll">，我可以获得水平滚动条，但它不再响应。
使用不同的width: inherit 也不起作用。
整个东西都包裹在一个<main class="container-fluid-page"> 和另一个div 中，但我认为这不会有任何影响...对吧？
<!DOCTYPE html>
<head>
...
</head>
<body>
<!-- other stuff that doesn't matter -->
<main class="container-fluid-page">
<div id="content">
<div id="results">
<h2>Results:</h2>
<!--<div class="table-responsive">-->
<table class="table table-sm">
<tbody>
<tr>
<th>Status</th>
<td>
<div id="results-status">
foo
</div>
</tr>
<tr>
<th>ReturnValue</th>
<td>
<div id="results-return-value">
<pre><code class="json">
"__type__": "RecordRef",
"name": "foo"
</code></pre>
</div>
</td>
</tr>
<tr>
<th>ReturnValue</th>
<td>
<div id="results-log">
<pre class="pre-scollable"><code>2019-05-23 07:51:32Z Log text
2019-05-23 07:51:33Z log text that can have a really really really long line in it and I want to scroll
2019-05-23 07:51:34Z log text</code></pre>
</div>
</td>
</tr>
</tbody>
</table>
<!--</div>--> <!-- class="table-responsive" -->
</div> <!-- id=results -->
</div> <!-- id=content -->
</main>
</body>
编辑：
-
从
<th> 和 <td> 定义中删除了 col-*。
【问题讨论】：
首先，在Bootstrap 4中不能将col-*用于<td>s或<th>s，因为网格系统是基于display:flex的。如果您将display-flex 应用于您的表格元素，您不应该期望它再像表格一样工作。所以你必须做出选择：要么使用网格系统进行布局（在你的情况下它似乎是正确的选择，因为你实际上并不显示表格数据 - 考虑总计、总和、重新排序元素等），或者如果你想使用一个表格（在这种情况下，您想通过 CSS 指定列的宽度）。
啊，谢谢。自从我从事这个项目以来已经有一段时间了，我认为 col-* 是我放弃使用 flexbox/grid 时的遗留物。我已将它们从示例中删除。当然没有改变，但你是对的，它可能会导致其他问题。
其次，您至少需要为可滚动的东西指定一个min-height。没有它，浏览器就无法确定哪里你想画线。它应该什么时候开始滚动？第一列的宽度也是如此。你必须告诉浏览器它的最小空间是多少。 Demo.
至于为什么从grid变成table……我不记得了，哈哈。不过，我会考虑切换回来，谢谢。
@AndreiGheorghiu 来自 Bootstrap 的 pre-scrollable 类负责这一点。 source
【参考方案1】：
考虑
恕我直言，您不应该根据我的评论编辑您的问题。在这样做的过程中，您的问题（远）对可能提出相同问题的未来用户的帮助减少了：
“为什么不在表格单元格上使用
col-*s？”
，考虑到 Bootstrap 的灵活性和多功能性，这是一个很好的问题。
为了将来参考，这里是问题的初始代码：
<!DOCTYPE html>
<head>
...
</head>
<body>
<!-- other stuff that doesn't matter -->
<main class="container-fluid-page">
<div id="content">
<div id="results">
<h2>Results:</h2>
<!--<div class="table-responsive">-->
<table class="table table-sm">
<tbody>
<tr>
<th class="col-2">Status</th>
<td class="col-10">
<div id="results-status">
foo
</div>
</tr>
<tr>
<th class="col-2">ReturnValue</th>
<td class="col-10">
<div id="results-return-value">
<pre><code class="json">
"__type__": "RecordRef",
"name": "foo"
</code></pre>
</div>
</td>
</tr>
<tr>
<th class="col-2">ReturnValue</th>
<td class="col-10">
<div id="results-log">
<pre class="pre-scollable"><code>2019-05-23 07:51:32Z Log text
2019-05-23 07:51:33Z log text that can have a really really really long line in it and I want to scroll
2019-05-23 07:51:34Z log text</code></pre>
</div>
</td>
</tr>
</tbody>
</table>
<!--</div>--> <!-- class="table-responsive" -->
</div> <!-- id=results -->
</div> <!-- id=content -->
</main>
</body>回答
col-* 类不能用于表格单元格的原因是，与以前的版本不同，从 v4 开始，Bootstrap 使用display:flex 和flex-basis 来调整网格布局大小，以实现智能布局- ing 技术，例如正负空间的均匀分布、垂直和水平对齐以及 flexbox 附带的所有其他好东西（即：order）。
对于您的情况，我建议按原样使用 Bootstrap 的原生网格布局系统：
pre.pre-scrollable
max-height: 132px;
#results pre
overflow: auto;
background-color: #f8f9fa;
padding: 1rem;
border-radius: .25rem;
margin-bottom: 0;
#results>.row>[class^="col-"]
padding-top: 1rem;
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<main class="container-fluid" id="results">
<div class="row">
<div class="col-2">
<label>Status</label>
</div>
<div class="col-10" class="results-status">
foo
</div>
</div>
<div class="row">
<div class="col-sm-2">
<label>Log</label>
</div>
<div class="col-sm-10" class="results-log">
<pre><code class="json">
"__type__": "RecordRef",
"name": "foo"
</code></pre>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<label>Return Value</label>
</div>
<div class="col-sm-10" class="results-return-value">
<pre class="pre-scrollable"><code>2019-05-23 07:51:32Z Log text
2019-05-23 07:51:33Z log text that can have a really really really long line in it and I want to scroll
2019-05-23 07:51:34Z log text
2019-05-23 07:51:32Z Log text
2019-05-23 07:51:33Z log text that can have a really really really long line in it and I want to scroll
2019-05-23 07:51:34Z log text
2019-05-23 07:51:32Z Log text
2019-05-23 07:51:33Z log text that can have a really really really long line in it and I want to scroll
2019-05-23 07:51:34Z log text
2019-05-23 07:51:32Z Log text
2019-05-23 07:51:33Z log text that can have a really really really long line in it and I want to scroll
2019-05-23 07:51:34Z log text</code></pre>
</div>
</div>
</main>请注意，它可以优雅地处理响应。
从列类名称中删除 -sm 合成器将导致列在窄屏幕上并排保持（就像表格一样）。
【讨论】：
我同意问题“为什么不在表格单元格上使用 col-*s？” 并且您的回答是对其他人有帮助。但是，它与我最初的问题完全无关“如何让表格中的单个单元格具有 XY 滚动条？” 也就是说，移动到网格布局的建议是我使用的正确解决方案案例，尽管它仍然没有回答原始问题（我承认这是一个 XY 问题）。 @dthor，如你所知，我已经为问题 X here 提供了一个实用的答案。请注意，我刚刚更新了它，并在 JS 面板中对我使用该技术的原因进行了冗长的评论。我已经尝试过其他方法来达到相同的结果，但每种方法都有其缺点，恕我直言，没有一个是令人满意的。希望它有助于理解为什么 X 是一个难以解决的问题。以上是关于有一个引导表单元格填充可用区域，溢出时滚动的主要内容，如果未能解决你的问题，请参考以下文章
在css-grid中使用align-items时使单元格内容填充整个单元格区域[重复]