Адаптивная таблица с названиями столбцов и строк разного размера

Я пытаюсь создать матрицу, которая выглядит так:

Что меня беспокоит, так это то, как сделать так, чтобы имена столбцов и строк соответствовали сетке посередине. Пока у меня есть этот код: пример jsfiddle

 t t t t
 e e e e
 x x x x
 t t t t
 0 0 0 0 text
 0 0 0 0 text
 0 0 0 0 text
 0 0 0 0 text

Я попытался сделать текст частью матрицы, но разный размер элементов снижает скорость отклика для небольших экранов. В настоящее время, когда вертикальный текст не является частью матрицы, он выглядит почти нормально, а горизонтальный - нет.

Я ищу совета, как продолжить.