固定高度表，与可用空间无关。表格可滚动

Posted

技术标签:

【中文标题】固定高度表，与可用空间无关。表格可滚动【英文标题】：Fixed height table irrespective of the available space. Table become scrollable 【发布时间】：2020-05-01 10:41:42 【问题描述】：

我希望我的表格有一个固定的动态高度，所以我可以滚动并且它不会扩展。

所以我有这个引导行和 2 列。我希望表格或左列的高度与右列所需的高度相同。

<div class="row">
<div class="col">
    <table class="table table-sm table-light table-striped">
        <tbody>
        <tr>
            <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
        </tr>
        <tr>
            <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
        </tr>
        <tr>
            <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
        </tr>
        <tr>
            <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
        </tr>
        <tr>
            <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
        </tr>
        <tr>
            <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
        </tr>
        <tr>
            <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
        </tr>
        <tr>
            <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
        </tr>
        <tr>
            <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
        </tr>
        <tr>
            <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
        </tr>
        <tr>
            <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
        </tr>
        <tr>
            <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
        </tr>
        </tbody>
    </table>
</div>
<div class="col">
    <h3>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur earum labore molestiae? Amet facilis
        minima nobis saepe ut voluptatem voluptates! Alias autem error explicabo hic molestiae non pariatur qui repellendus?</h3>

    <p>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam expedita id illum ipsam molestiae quam, qui recusandae sed sint voluptate. Accusantium amet atque, cumque error est facere harum libero magnam molestias nam nemo, nobis omnis perspiciatis suscipit tenetur ullam veritatis voluptates voluptatibus? Amet blanditiis, consequatur cupiditate, ea earum eius fugiat illo in ipsa itaque magni nemo nihil quaerat quia ratione saepe, sunt ullam vel. Accusamus ad adipisci architecto blanditiis cupiditate debitis doloribus dolorum error facere hic laboriosam, laudantium magni maxime, molestias mollitia necessitatibus, nisi quibusdam quis quos veritatis. Assumenda cum cumque facere nobis quaerat sed, sequi voluptatem! Ab, dolores odit.</p>
</div>

在这个例子中，如果我添加更多行，表格只会向下扩展。但是我希望表格在高度处于右列高度时跳过扩展并改为滚动。

我使用 bootstrap 进行样式设置。

提前致谢！

【问题讨论】：

【参考方案1】：

由于您希望表格尊重较小列的高度，我们需要 javascript...

我们获取右列的高度并将其应用于表格，让滚动条帮助查看内容

在下面工作sn-p：

$(window).on("resize", function() 
  $(".col:nth-child(1)").css('height', $(".actualContents").height());
  $(".col:nth-child(1)").css('display', 'block');
  $(".col:nth-child(1)").css('overflow-y', 'scroll');
).resize();
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col">
      <table class="table table-sm table-light table-striped">
        <tbody>
          <tr>
            <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
          </tr>
          <tr>
            <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
          </tr>
          <tr>
            <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
          </tr>
          <tr>
            <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
          </tr>
          <tr>
            <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
          </tr>
          <tr>
            <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
          </tr>
          <tr>
            <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
          </tr>
          <tr>
            <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
          </tr>
          <tr>
            <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
          </tr>
          <tr>
            <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
          </tr>
          <tr>
            <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
          </tr>
          <tr>
            <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="col">
      <div class="actualContents">
        <h3>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur earum labore molestiae? Amet facilis minima nobis saepe ut voluptatem voluptates! Alias autem error explicabo hic molestiae non pariatur qui repellendus?</h3>

        <p>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam expedita id illum ipsam molestiae quam, qui recusandae sed sint voluptate. Accusantium amet atque, cumque error est facere harum libero magnam molestias nam nemo, nobis omnis perspiciatis
          suscipit tenetur ullam veritatis voluptates voluptatibus? Amet blanditiis, consequatur cupiditate, ea earum eius fugiat illo in ipsa itaque magni nemo nihil quaerat quia ratione saepe, sunt ullam vel. Accusamus ad adipisci architecto blanditiis
          cupiditate debitis doloribus dolorum error facere hic laboriosam, laudantium magni maxime, molestias mollitia necessitatibus, nisi quibusdam quis quos veritatis. Assumenda cum cumque facere nobis quaerat sed, sequi voluptatem! Ab, dolores odit.</p>
      </div>
    </div>
  </div>

【讨论】：

谢谢，我想知道是否有办法单独使用 css 来做到这一点？ flex 可以采用更大的列并调整其余部分以匹配它......但我认为没有任何 OOTB 可以做到这一点，因为特定列的高度不是最高的【参考方案2】：

由于前一个是在 jQuery 中（我不使用），我将在 JS 中回答： const rightColumn = document.getElementById("rightColumn").firstElementChild;

const table = document.getElementById("actualContents");

window.addEventListener("resize", (evt) => 
    resize();
);

function resize() 
    table.style.height = rightColumn.clientHeight;
    table.style.overflowY = "scroll";

resize();

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col">
      <table class="table table-sm table-light table-striped">
        <tbody>
          <tr>
            <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
          </tr>
          <tr>
            <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
          </tr>
          <tr>
            <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
          </tr>
          <tr>
            <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
          </tr>
          <tr>
            <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
          </tr>
          <tr>
            <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
          </tr>
          <tr>
            <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
          </tr>
          <tr>
            <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
          </tr>
          <tr>
            <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
          </tr>
          <tr>
            <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
          </tr>
          <tr>
            <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
          </tr>
          <tr>
            <td>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, cupiditate!</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="col">
      <div id="actualContents">
        <h3>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur earum labore molestiae? Amet facilis minima nobis saepe ut voluptatem voluptates! Alias autem error explicabo hic molestiae non pariatur qui repellendus?</h3>

        <p>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam expedita id illum ipsam molestiae quam, qui recusandae sed sint voluptate. Accusantium amet atque, cumque error est facere harum libero magnam molestias nam nemo, nobis omnis perspiciatis
          suscipit tenetur ullam veritatis voluptates voluptatibus? Amet blanditiis, consequatur cupiditate, ea earum eius fugiat illo in ipsa itaque magni nemo nihil quaerat quia ratione saepe, sunt ullam vel. Accusamus ad adipisci architecto blanditiis
          cupiditate debitis doloribus dolorum error facere hic laboriosam, laudantium magni maxime, molestias mollitia necessitatibus, nisi quibusdam quis quos veritatis. Assumenda cum cumque facere nobis quaerat sed, sequi voluptatem! Ab, dolores odit.</p>
      </div>
    </div>
  </div>

【讨论】：

以上是关于固定高度表，与可用空间无关。表格可滚动的主要内容，如果未能解决你的问题，请参考以下文章

具有固定标题、滚动条和动态高度的 HTML 表格

elementUI组件表格高度以及表头固定表身滚动方法

表格固定标题和可滚动正文

UICollectionView 单元格高度/可滚动内容行为奇怪/不正确

CSS如何做到页面固定高度，header置顶footer固底page内容超过页面长度后可上下滚动。

为固定的 100% 高度 div 创建可滚动内容