Wie verhindern Sie ein Tischschrumpfung und eine feste Breite und Höhe für jede Säule/Zeile und aktivieren Sie den Überl ⇐ HTML

[Guest]

Ich versuche (mithilfe von tailwindcss) eine perfekte Matrix mit den Boxgrößen w-11 und h-11 zu erstellen. Dabei steht in jeder Zeile links ein Titel und in jeder Spalte oben ein Titel. Die Anzahl der Spalten und Zeilen ist immer gleich, kann jedoch variieren und wird dynamisch über js erstellt. Das bedeutet, dass ich min-w-[] nicht festlegen kann, da ich vorher nicht weiß, wie viele Pixel. Wenn die Menge in das Ansichtsfenster passt, sind die Felder alle quadratisch, aber wenn die Menge die horizontale Breite überschreitet, wird die Tabelle verkleinert, anstatt die Größe beizubehalten und die Bildlaufleiste zu aktivieren.
Dies ist der Code dafür Ich habe es gerade versucht. Das andere Merkwürdige ist, dass ich es auch nicht schaffe, rechts in der Tabelle Leerraum zu schaffen. Weder mit der Polsterung noch mit dem Rand hat es funktioniert.
(Die w-3/4-Klasse ist vorhanden, weil es im Gesamtdesign links ein Menü gibt)

Code: Select all

  < 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 t e & q u o t ; & g t;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

Die Zeilen wiederholen sich, aber ich habe sie weggelassen.
Mit CSS-Klassen:

Code: Select all

.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