有一个引导程序表的单元格填充可用区域，在溢出时滚动

时间：2019-05-23 15:41:36

标签： html css html-table bootstrap-4

因此，关于Bootstrap和表以及响应性有很多问题，但是我发现的所有问题似乎只涉及 Table 滚动或填充可用区域。

我无法将特定的 cell （<td>元素）添加到
（a）填充到可用空间，停在窗口边界处（例如：保持流畅），并且
（b）如果单元格太大，则添加水平滚动条。

目标：

enter image description here

尽力而为

这是我到目前为止所掌握的。注意事项：

  • 我没有使用任何自定义CSS，只是使用了Bootstrap 4.1.3提供的CSS
  • 您会看到<div class="table-responsive">被注释掉了-这是因为我不希望整个表可滚动。
  • 当日志有多行时，<pre class="pre-scollable">部分成功添加了 vertical 滚动条，但没有添加水平滚动条
  • 我尝试将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>

编辑：

  1. 从col-*和<th>的定义中删除了<td>。

1 个答案:

答案 0 :(得分：1)

注意事项

恕我直言，您不应该根据我的评论编辑问题。这样一来，您（使）问题对于可能会问相同问题的未来用户没有多大帮助：

  

“为什么不对表格单元格使用col-*？”

，考虑到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-*类的原因是，与以前的版本不同，Bootstrap从v4开始使用display:flex和flex-basis来调整网格布局的大小，允许使用智能布局技术，例如正负空间的均等分布，垂直和水平对齐以及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合成器将导致这些列并排保留在狭窄的屏幕上（就像表一样）。

相关问题
最新问题