Как предотвратить сжатие таблицы при фиксированной ширине и высоте для каждого столбца/строки и активировать переполнени ⇐ Html

[Anonymous]

Я пытаюсь создать идеальную матрицу (используя Tailwindcss) с размерами ячеек w-11 и h-11. Имея в каждой строке слева заголовок и в каждом столбце вверху заголовок. Количество столбцов и строк всегда одинаково, но их количество может варьироваться и выполняется динамически через js. Это означает, что я не могу установить min-w-[], так как заранее не знаю, сколько пикселей. Если сумма умещается в окне просмотра, все поля становятся квадратными, но если сумма расширяет горизонтальную ширину, таблица сжимается вместо того, чтобы сохранять размер и активировать полосу прокрутки.
Это код, который Я пробовал в настоящее время. Другая странность заключается в том, что мне также не удается создать пустое пространство справа от таблицы. Ни с отступами, ни с полями это не сработало.
(Класс w-3/4 присутствует, потому что в общем дизайне слева есть меню)
< b r / > & l t ; t a b l e c l a s s = & q u o t ; t a b l e - f i x e d & q u o t ; & g t ; < b r / > & l t ; t h e a d & g t ; < b r / > & l t ; t r & g t ; < b r / > & l t ; t d & g t ; & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; [ w r i t i n g - m o d e : s i d e w a y s - l r ] p b - 2 & q u o t ; & g t ; T E X T ( 1 0 ) & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; [ w r i t i n g - m o d e : s i d e w a y s - l r ] p b - 2 & q u o t ; & g t ; T E X T ( 2 ) & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; [ w r i t i n g - m o d e : s i d e w a y s - l r ] p b - 2 & q u o t ; & g t ; T E X T ( 5 ) & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; [ w r i t i n g - m o d e : s i d e w a y s - l r ] p b - 2 & q u o t ; & g t ; T E X T ( 1 0 ) & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; [ w r i t i n g - m o d e : s i d e w a y s - l r ] p b - 2 & q u o t ; & g t ; T E X T ( 1 . 1 ) & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; [ w r i t i n g - m o d e : s i d e w a y s - l r ] p b - 2 & q u o t ; & g t ; T E X T ( 1 0 ) & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; [ w r i t i n g - m o d e : s i d e w a y s - l r ] p b - 2 & q u o t ; & g t ; T E X T ( 2 ) & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; [ w r i t i n g - m o d e : s i d e w a y s - l r ] p b - 2 & q u o t ; & g t ; T E X T ( 5 ) & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; [ w r i t i n g - m o d e : s i d e w a y s - l r ] p b - 2 & q u o t ; & g t ; T E X T ( 1 0 ) & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; [ w r i t i n g - m o d e : s i d e w a y s - l r ] p b - 2 & q u o t ; & g t ; T E X T ( 1 . 1 ) & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; [ w r i t i n g - m o d e : s i d e w a y s - l r ] p b - 2 & q u o t ; & g t ; T E X T ( 1 0 ) & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; [ w r i t i n g - m o d e : s i d e w a y s - l r ] p b - 2 & q u o t ; & g t ; T E X T ( 2 ) & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; [ w r i t i n g - m o d e : s i d e w a y s - l r ] p b - 2 & q u o t ; & g t ; T E X T ( 5 ) & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; [ w r i t i n g - m o d e : s i d e w a y s - l r ] p b - 2 & q u o t ; & g t ; T E X T ( 1 0 ) & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; [ w r i t i n g - m o d e : s i d e w a y s - l r ] p b - 2 & q u o t ; & g t ; T E X T ( 1 . 1 ) & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; [ w r i t i n g - m o d e : s i d e w a y s - l r ] p b - 2 & q u o t ; & g t ; T E X T ( 1 0 ) & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; [ w r i t i n g - m o d e : s i d e w a y s - l r ] p b - 2 & q u o t ; & g t ; T E X T ( 2 ) & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; [ w r i t i n g - m o d e : s i d e w a y s - l r ] p b - 2 & q u o t ; & g t ; T E X T ( 5 ) & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; [ w r i t i n g - m o d e : s i d e w a y s - l r ] p b - 2 & q u o t ; & g t ; T E X T ( 1 0 ) & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; [ w r i t i n g - m o d e : s i d e w a y s - l r ] p b - 2 & q u o t ; & g t ; T E X T ( 1 . 1 ) & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; [ w r i t i n g - m o d e : s i d e w a y s - l r ] p b - 2 & q u o t ; & g t ; T E X T ( 1 0 ) & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; [ w r i t i n g - m o d e : s i d e w a y s - l r ] p b - 2 & q u o t ; & g t ; T E X T ( 2 ) & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; [ w r i t i n g - m o d e : s i d e w a y s - l r ] p b - 2 & q u o t ; & g t ; T E X T ( 5 ) & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; [ w r i t i n g - m o d e : s i d e w a y s - l r ] p b - 2 & q u o t ; & g t ; T E X T ( 1 0 ) & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; [ w r i t i n g - m o d e : s i d e w a y s - l r ] p b - 2 & q u o t ; & g t ; T E X T ( 1 . 1 ) & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; [ w r i t i n g - m o d e : s i d e w a y s - l r ] p b - 2 & q u o t ; & g t ; T E X T ( 1 0 ) & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; [ w r i t i n g - m o d e : s i d e w a y s - l r ] p b - 2 & q u o t ; & g t ; T E X T ( 2 ) & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; [ w r i t i n g - m o d e : s i d e w a y s - l r ] p b - 2 & q u o t ; & g t ; T E X T ( 5 ) & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; [ w r i t i n g - m o d e : s i d e w a y s - l r ] p b - 2 & q u o t ; & g t ; T E X T ( 1 0 ) & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; [ w r i t i n g - m o d e : s i d e w a y s - l r ] p b - 2 & q u o t ; & g t ; T E X T ( 1 . 1 ) & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; [ w r i t i n g - m o d e : s i d e w a y s - l r ] p b - 2 & q u o t ; & g t ; T E X T ( 1 0 ) & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; [ w r i t i n g - m o d e : s i d e w a y s - l r ] p b - 2 & q u o t ; & g t ; T E X T ( 2 ) & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; [ w r i t i n g - m o d e : s i d e w a y s - l r ] p b - 2 & q u o t ; & g t ; T E X T ( 5 ) & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; [ w r i t i n g - m o d e : s i d e w a y s - l r ] p b - 2 & q u o t ; & g t ; T E X T ( 1 0 ) & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; [ w r i t i n g - m o d e : s i d e w a y s - l r ] p b - 2 & q u o t ; & g t ; T E X T ( 1 . 1 ) & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; [ w r i t i n g - m o d e : s i d e w a y s - l r ] p b - 2 & q u o t ; & g t ; T E X T ( 1 0 ) & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; [ w r i t i n g - m o d e : s i d e w a y s - l r ] p b - 2 & q u o t ; & g t ; T E X T ( 2 ) & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; [ w r i t i n g - m o d e : s i d e w a y s - l r ] p b - 2 & q u o t ; & g t ; T E X T ( 5 ) & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; [ w r i t i n g - m o d e : s i d e w a y s - l r ] p b - 2 & q u o t ; & g t ; T E X T ( 1 0 ) & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; [ w r i t i n g - m o d e : s i d e w a y s - l r ] p b - 2 & q u o t ; & g t ; T E X T ( 1 . 1 ) & l t ; / t d & g t ; < b r / > & l t ; / t r & g t ; < b r / > & l t ; / t h e a d & g t ; < b r / > & l t ; t b o d y & g t ; < b r / > & l t ; t r & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; t e x t - r i g h t p r - 2 t e x t - n o w r a p & q u o t ; & g t ; T E X T ( 1 0 ) & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - r e d & q u o t ; & g t ; & l t ; s p a n c l a s s = & q u o t ; t e x t - e w h i t e & q u o t ; & g t ; 1 & l t ; / s p a n & g t ; & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - r e d & q u o t ; & g t ; 1 & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - l i g h t B l u e & q u o t ; & g t ; 4 & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - d a r k B l u e & q u o t ; & g t ; & l t ; s p a n c l a s s = & q u o t ; t e x t - e w h i t e & q u o t ; & g t ; 2 0 & l t ; / s p a n & g t ; & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - r e d & q u o t ; & g t ; 1 & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - r e d & q u o t ; & g t ; & l t ; s p a n c l a s s = & q u o t ; t e x t - e w h i t e & q u o t ; & g t ; 1 & l t ; / s p a n & g t ; & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - r e d & q u o t ; & g t ; 1 & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - l i g h t B l u e & q u o t ; & g t ; 4 & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - d a r k B l u e & q u o t ; & g t ; & l t ; s p a n c l a s s = & q u o t ; t e x t - e w h i t e & q u o t ; & g t ; 2 0 & l t ; / s p a n & g t ; & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - r e d & q u o t ; & g t ; 1 & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - r e d & q u o t ; & g t ; & l t ; s p a n c l a s s = & q u o t ; t e x t - e w h i t e & q u o t ; & g t ; 1 & l t ; / s p a n & g t ; & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - r e d & q u o t ; & g t ; 1 & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - l i g h t B l u e & q u o t ; & g t ; 4 & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - d a r k B l u e & q u o t ; & g t ; & l t ; s p a n c l a s s = & q u o t ; t e x t - e w h i t e & q u o t ; & g t ; 2 0 & l t ; / s p a n & g t ; & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - r e d & q u o t ; & g t ; 1 & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - r e d & q u o t ; & g t ; & l t ; s p a n c l a s s = & q u o t ; t e x t - e w h i t e & q u o t ; & g t ; 1 & l t ; / s p a n & g t ; & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - r e d & q u o t ; & g t ; 1 & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - l i g h t B l u e & q u o t ; & g t ; 4 & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - d a r k B l u e & q u o t ; & g t ; & l t ; s p a n c l a s s = & q u o t ; t e x t - e w h i t e & q u o t ; & g t ; 2 0 & l t ; / s p a n & g t ; & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - r e d & q u o t ; & g t ; 1 & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - r e d & q u o t ; & g t ; & l t ; s p a n c l a s s = & q u o t ; t e x t - e w h i t e & q u o t ; & g t ; 1 & l t ; / s p a n & g t ; & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - r e d & q u o t ; & g t ; 1 & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - l i g h t B l u e & q u o t ; & g t ; 4 & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - d a r k B l u e & q u o t ; & g t ; & l t ; s p a n c l a s s = & q u o t ; t e x t - e w h i t e & q u o t ; & g t ; 2 0 & l t ; / s p a n & g t ; & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - r e d & q u o t ; & g t ; 1 & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - r e d & q u o t ; & g t ; & l t ; s p a n c l a s s = & q u o t ; t e x t - e w h i t e & q u o t ; & g t ; 1 & l t ; / s p a n & g t ; & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - r e d & q u o t ; & g t ; 1 & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - l i g h t B l u e & q u o t ; & g t ; 4 & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - d a r k B l u e & q u o t ; & g t ; & l t ; s p a n c l a s s = & q u o t ; t e x t - e w h i t e & q u o t ; & g t ; 2 0 & l t ; / s p a n & g t ; & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - r e d & q u o t ; & g t ; 1 & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - r e d & q u o t ; & g t ; & l t ; s p a n c l a s s = & q u o t ; t e x t - e w h i t e & q u o t ; & g t ; 1 & l t ; / s p a n & g t ; & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - r e d & q u o t ; & g t ; 1 & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - l i g h t B l u e & q u o t ; & g t ; 4 & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - d a r k B l u e & q u o t ; & g t ; & l t ; s p a n c l a s s = & q u o t ; t e x t - e w h i t e & q u o t ; & g t ; 2 0 & l t ; / s p a n & g t ; & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - r e d & q u o t ; & g t ; 1 & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - r e d & q u o t ; & g t ; & l t ; s p a n c l a s s = & q u o t ; t e x t - e w h i t e & q u o t ; & g t ; 1 & l t ; / s p a n & g t ; & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - r e d & q u o t ; & g t ; 1 & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - l i g h t B l u e & q u o t ; & g t ; 4 & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - d a r k B l u e & q u o t ; & g t ; & l t ; s p a n c l a s s = & q u o t ; t e x t - e w h i t e & q u o t ; & g t ; 2 0 & l t ; / s p a n & g t ; & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - r e d & q u o t ; & g t ; 1 & l t ; / t d & g t ; < b r / > & l t ; / t r & g t ; < b r / > & l t ; t r & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; t e x t - r i g h t p r - 2 t e x t - n o w r a p & q u o t ; & g t ; T E X T ( 1 0 ) & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - r e d & q u o t ; & g t ; & l t ; s p a n c l a s s = & q u o t ; t e x t - e w h i t e & q u o t ; & g t ; 1 & l t ; / s p a n & g t ; & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - r e d & q u o t ; & g t ; 1 & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - l i g h t B l u e & q u o t ; & g t ; 4 & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - d a r k B l u e & q u o t ; & g t ; & l t ; s p a n c l a s s = & q u o t ; t e x t - e w h i t e & q u o t ; & g t ; 2 0 & l t ; / s p a n & g t ; & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - r e d & q u o t ; & g t ; 1 & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - r e d & q u o t ; & g t ; & l t ; s p a n c l a s s = & q u o t ; t e x t - e w h i t e & q u o t ; & g t ; 1 & l t ; / s p a n & g t ; & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - r e d & q u o t ; & g t ; 1 & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - l i g h t B l u e & q u o t ; & g t ; 4 & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - d a r k B l u e & q u o t ; & g t ; & l t ; s p a n c l a s s = & q u o t ; t e x t - e w h i t e & q u o t ; & g t ; 2 0 & l t ; / s p a n & g t ; & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - r e d & q u o t ; & g t ; 1 & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - r e d & q u o t ; & g t ; & l t ; s p a n c l a s s = & q u o t ; t e x t - e w h i t e & q u o t ; & g t ; 1 & l t ; / s p a n & g t ; & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - r e d & q u o t ; & g t ; 1 & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - l i g h t B l u e & q u o t ; & g t ; 4 & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - d a r k B l u e & q u o t ; & g t ; & l t ; s p a n c l a s s = & q u o t ; t e x t - e w h i t e & q u o t ; & g t ; 2 0 & l t ; / s p a n & g t ; & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - r e d & q u o t ; & g t ; 1 & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - r e d & q u o t ; & g t ; & l t ; s p a n c l a s s = & q u o t ; t e x t - e w h i t e & q u o t ; & g t ; 1 & l t ; / s p a n & g t ; & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - r e d & q u o t ; & g t ; 1 & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - l i g h t B l u e & q u o t ; & g t ; 4 & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - d a r k B l u e & q u o t ; & g t ; & l t ; s p a n c l a s s = & q u o t ; t e x t - e w h i t e & q u o t ; & g t ; 2 0 & l t ; / s p a n & g t ; & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - r e d & q u o t ; & g t ; 1 & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - r e d & q u o t ; & g t ; & l t ; s p a n c l a s s = & q u o t ; t e x t - e w h i t e & q u o t ; & g t ; 1 & l t ; / s p a n & g t ; & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - r e d & q u o t ; & g t ; 1 & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - l i g h t B l u e & q u o t ; & g t ; 4 & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - d a r k B l u e & q u o t ; & g t ; & l t ; s p a n c l a s s = & q u o t ; t e x t - e w h i t e & q u o t ; & g t ; 2 0 & l t ; / s p a n & g t ; & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - r e d & q u o t ; & g t ; 1 & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - r e d & q u o t ; & g t ; & l t ; s p a n c l a s s = & q u o t ; t e x t - e w h i t e & q u o t ; & g t ; 1 & l t ; / s p a n & g t ; & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - r e d & q u o t ; & g t ; 1 & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - l i g h t B l u e & q u o t ; & g t ; 4 & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - d a r k B l u e & q u o t ; & g t ; & l t ; s p a n c l a s s = & q u o t ; t e x t - e w h i t e & q u o t ; & g t ; 2 0 & l t ; / s p a n & g t ; & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - r e d & q u o t ; & g t ; 1 & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - r e d & q u o t ; & g t ; & l t ; s p a n c l a s s = & q u o t ; t e x t - e w h i t e & q u o t ; & g t ; 1 & l t ; / s p a n & g t ; & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - r e d & q u o t ; & g t ; 1 & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - l i g h t B l u e & q u o t ; & g t ; 4 & l t ; / t d & g t ; < b r / > & l t ; t d c l a s s = & q u o t ; m a t r i x - b o x - d a r k B l u e & q u o t ; & g t ; & l t ; s p a n c l a s s = & q u o t ; t e x t - e w h i te">20
1
1
1
4
20
1


TEXT (10)
1
1
4
20
1
1
1
4
20
1
1
1
4
20
1
1
1
4
20
1
1
1
4
20
1
1
1
4
20
1
1
1
4
20
1
1
1
4
20
1


Строки повторяются, но я их пропустил.
С классами CSS:
.matrix-box-ered{
@apply w-11 h-11 bg-red border text-center
}
.matrix-box-lightBlue{
@apply w-11 h-11 bg-lightBlue70 border text-center
}
.matrix-box-darkBlue{
@apply w-11 h-11 bg-darkBlue100 border text-center


Подробнее здесь: https://stackoverflow.com/questions/793 ... ach-column