Динамическая высота таблицы HTML для одной ячейки

Question

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

______________________________________ 
|   fixed height   | 
|____________________________________| 
|         | 
|         | 
|   dynamic height   | 
|         | 
|____________________________________| 
|   fixed height   | 
|____________________________________| 

Так высота первой и последней ячейки фиксированы, центр ячейки должен быть динамичным и прокручивать.

В настоящее время у меня есть следующий код, но он не работает:

<table style="max-height:200px"> 
    <tr> 
     <td height="30px">First element</td> 
    </tr> 
    <tr> 
     <td> 
      <!-- Div for scroll functionality if content is too high --> 
      <div style="overflow:auto"> 
       Dynamic content which needs to be scrolled sometimes 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td height="30px">last element</td> 
    </tr> 
</table> 

EDIT: она не должна быть таблица, это просто важно, что центральный элемент имеет динамическую высоту и прокручивать

EDIT: Я знаю, что я могу указать высоту элемента для прокрутки - тогда он работает. Но я хочу, чтобы высота элемента быть динамичными

Answer 1

Вы можете это:

1) Я дал height:auto к столу, и здесь width:80% в таблице не является обязательным.

2)Div внутри td дается height:60px; (только случайное, чтобы вызвать полосы прокрутки), наряду с overflow:auto;.

3) Первый и второй td's имеют специфические height:30px;

Проверьте это:

<table style="height:auto; width:80%;" border=1> 
 
    <tr> 
 
     <td height="30px">First element</td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
      <!-- Div for scroll functionality if content is too high --> 
 
      <div style="overflow:auto; height: 60px;"> 
 
       Dynamic content which needs to be scrolled sometimes 
 
       Dynamic content which needs to be scrolled sometimes 
 
       Dynamic content which needs to be scrolled sometimes 
 
       Dynamic content which needs to be scrolled sometimes 
 
       Dynamic content which needs to be scrolled sometimes 
 
       Dynamic content which needs to be scrolled sometimes 
 
      </div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td height="30px">last element</td> 
 
    </tr> 
 
</table>

Update: Нет Конкретная Высота

Здесь в обновлении я использовал max-height

<table style="height:auto; width:75%; margin:0px auto;" border=1> 
 
    <tr> 
 
     <td height="30px">First element</td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
      <!-- Div for scroll functionality if content is too high --> 
 
      <div style="overflow:auto; max-height:100px;"> 
 
       Dynamic content which needs to be scrolled sometimes 
 
       Dynamic content which needs to be scrolled sometimes 
 
       Dynamic content which needs to be scrolled sometimes 
 
       Dynamic content which needs to be scrolled sometimes 
 
       Dynamic content which needs to be scrolled sometimes 
 
       Dynamic content which needs to be scrolled sometimes 
 
       Dynamic content which needs to be scrolled sometimes 
 
       Dynamic content which needs to be scrolled sometimes 
 
      </div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td height="30px">last element</td> 
 
    </tr> 
 
</table>

Примечание: Если вы хотите использовать для %max-height дают height и width равен 100% вашему body.