Фиксированная высота стола независимо от доступного места. Стол становится прокручиваемым

Question

Я хочу, чтобы моя таблица имела фиксированную динамическую высоту c, чтобы я мог прокручивать ее, но она не расширяется.

Итак, у меня есть bootstrap строка и 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 для стиля.

Заранее спасибо!

Answer 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>

Answer 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>