Как сделать так, чтобы таблица (блок) с контентом внутри растягивался только на свободное пространство в зависимости от другого блока?

Чтобы таблица или любой другой блок растягивался только на свободное пространство в зависимости от другого блока в CSS, вы можете использовать свойство "flex" и flex-контейнер.

Подходящий способ достижения этого — использование flexbox. Flexbox является одним из модулей CSS3, который предоставляет нам мощные возможности для создания гибких и адаптивных макетов.

Для создания flex-контейнера, вы должны применить свойство "display" и установить его значение в "flex" для родительского блока, который содержит оба блока - блок с контентом и блок, ширина которого является исходной точкой для растягивания.

.container {
  display: flex;
}

.block1 {
  width: 200px;
}

.block2 {
  flex: 1;
}

В данном примере, .container является flex-контейнером, .block1 является блоком, ширина которого является исходной точкой для растягивания, и .block2 является блоком, который будет растягиваться на оставшееся пространство.

Устанавливая свойство "flex" в значении "1" для .block2, мы говорим браузеру, что этот блок должен растянуться на максимальное доступное пространство.

<div class="container">
  <div class="block1">
    <!-- Контент блока 1 -->
  </div>
  <div class="block2">  
    <!-- Контент блока 2 -->
  </div>
</div>

Применив этот CSS код и HTML разметку, вы создадите таблицу или любой другой блок, который будет растягиваться только на свободное пространство в зависимости от другого блока.