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

[Anonymous]

Я пытаюсь создать идеальную матрицу (используя Tailwindcss) с размерами коробок W-11 и H-11. Находясь в каждой строке слева от заголовка и на каждом столбце на вершине заголовок. Количество столбцов и рядов всегда одинаковое, но их количество может варьироваться и динамически выполняется через JS. Это означает, что я не могу установить min-w- [], как я не знаю заранее, сколько PX. Если сумма подходит на порт просмотра, все коробки находятся квадратными, но если сумма увеличивает горизонтальную ширину, таблица сжимается вместо того, чтобы сохранить размер и активировать полос прокрутки. < /P>
Это код, который код Я пробовал в настоящее время. Другое странное, что я также не могу создать белое пространство справа от стола. Не приготовления ни заполнения, ни с краем, это сработало. />
< 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