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

时间：2020-01-14 16:47:45

标签： html css html-table scroll bootstrap-4

我希望桌子具有固定的动态高度，因此我可以滚动并且它不会扩展。

所以我有这个引导行和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 进行样式设置。

谢谢！

2 个答案:

答案 0 :(得分：1)

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

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

下面的代码段：

$(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>

答案 1 :(得分：0)

由于上一个是在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>
相关问题
最新问题