Лучший способ приблизиться к адаптивной сетке/таблице, где ячейки переполняются

Прошло много времени с тех пор, как мне нужна была помощь по HTML и CSS, так что либо это чушь, либо я все еще идиот. В свободное время я разрабатываю POS-приложение для ресторанов.

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

9 из 10 страниц я конвертировал без проблем, но эта меня зацепила.

Ранее я создал его, и он отлично работал с таблицами и вложенными элементами div в каждой ячейке.

В общем, у меня есть сетка кнопок размером 6*8. Достаточно легко.

За исключением того, что я хочу сохранить возможность настройки по размерам экрана - поэтому каждая кнопка имеет класс - нормальный, doubleHeight, doubleWidth ИЛИ doubleWidthAndHeight.

То, что они делают, должно быть понятным, и каждая кнопка имеет указанную ячейку, и если высота или ширина превышает ячейку, кнопка просто выходит за ее пределы и занимает также следующую ячейку. Вот пример изображения того, как это (раньше) выглядело: Код для этого будет:

 <tr>


<td><!--[Burger button.doubleWidthAndHeight--></td>


<td></td>


<td><!--[Remove Pineapple button.normal--></td>


<td></td>


<td></td>


<td></td>


</tr>


<tr>


<td></td>


<td></td>


<td><!--[Add bacon button.normal--></td>


<td></td>


<td></td>


<td></td>


</tr>

Код (разметка): Однако я действительно не уверен, как к этому подойти плавно.

Этот div содержится в гибком контейнере.

Я подумываю сделать это полностью с помощью гибких элементов, но не могу придумать, как это разметить.



Я бы хотел, чтобы каждая кнопка определялась в процентах относительно контейнера, а не в em или px (но тогда невозможно иметь ширину или высоту 200%). Применение процентной ширины к td, похоже, также вызывает у меня проблемы, но код сейчас настолько сломан из-за экспериментов, что я не уверен на 100%. Также поигрались с rowspan и colspan.

Любые идеи будут приветствоваться.