Таблица с фиксированной высотой заголовка и другими строками в процентах от контейнера

Я хотел бы создать таблицу с фиксированной высотой заголовка (f.ex. 20px), а высота других строк должна определяться процентом контейнера (f.ex. 12%).

Число строк варьируется от 4 до 6, и это является причиной того, что моя таблица ведет себя неправильно. Высота заголовка изменяется в зависимости от количества строк, несмотря на то, что он определен в CSS (минимальная высота, высота и максимальная высота).

Здесь пример CSS:

#container
{
  height: 800px;
}

#t1
{
  border-collapse: collapse;
  table-layout: fixed;
  //height: 100%;
  border: 1px solid black;
}

#head_row
{
  height: 20px;
  max-height: 20px;
  min-height: 20px;
}

tbody tr
{
    height: 12%;
    max-height: 12%;
    min-height: 12%;
}

tbody td
{
    border: 1px solid black;
    height: 12%;
    max-height: 12%;
    min-height: 12%; 
}

Вот пример JSfiddle того, чего я пытаюсь достичь, но без установки высоты таблицы до 100% это не сработает, и я прокомментировал это.

jsfiddle здесь.

Что я забыл или что я делаю неправильно? Есть ли способ сделать это, используя только HTML и CSS?

РЕДАКТИРОВАТЬ:

Я пытаюсь сделать небольшой календарь (я не писал его раньше), и я просто посмотрел, как Google делает это:

Календарь Google

У них заголовок как одна таблица, а каждая строка - как div с таблицей с одной строкой внутри... Ну, я считаю, что люди в Google знают, что они делают, но действительно ли нет более простого способа?