Как смоделировать несколько заголовков таблиц?

Я пытаюсь создать таблицу CSS, у которой (для целей макета) есть заголовок вверху и Нижний.

К сожалению, , насколько я могу судить, , display: table-caption объединяет все в единое пространство вверху. Это означает, что фактически отображается только заголовок "заголовок".

Я пробовал рассматривать их как строки вместо , но по какой-то причине их ширина привязана к ширине первого столбца таблицы. (Я здесь что-то делаю не так?) То же самое произойдет, если я сделаю их обычными div с их шириной, установленной на 100% .

Есть ли другой, возможно, более элегантный способ иметь несколько заголовков таблиц? Я допустил какую-то глупую ошибку в своих попытках испортить макет?