I am trying to create a perfect matrix (using tailwindcss) with box sizes of w-11 and h-11. While having on each row on the left a title and on each column on the top a title. The amount of columns and rows are always the same but they amount can vary and is dynamically done through js. This means I cannot set min-w-[] as I do not know before hand how many px. If the amount fits on the view port the boxes are all square but if the amount extends the horizontal width the table shrinks instead of keeping the size and activating the scrollbar.
This is the code that I tried currently. The other odd thing is that I also cannot manage to create white space on the right of the table. Not with padding nor with margin did it work.
(The w-3/4 class is there because in the overall design there is a menu on the left)
<div class="w-3/4 overflow-sroll ml-[25%]">
<table class="table-fixed">
<thead>
<tr>
<td></td>
<td class="[writing-mode:sideways-lr] pb-2">TEXT (10)</td>
<td class="[writing-mode:sideways-lr] pb-2">TEXT (2)</td>
<td class="[writing-mode:sideways-lr] pb-2">TEXT (5)</td>
<td class="[writing-mode:sideways-lr] pb-2">TEXT (10)</td>
<td class="[writing-mode:sideways-lr] pb-2">TEXT (1.1)</td>
<td class="[writing-mode:sideways-lr] pb-2">TEXT (10)</td>
<td class="[writing-mode:sideways-lr] pb-2">TEXT (2)</td>
<td class="[writing-mode:sideways-lr] pb-2">TEXT (5)</td>
<td class="[writing-mode:sideways-lr] pb-2">TEXT (10)</td>
<td class="[writing-mode:sideways-lr] pb-2">TEXT (1.1)</td>
<td class="[writing-mode:sideways-lr] pb-2">TEXT (10)</td>
<td class="[writing-mode:sideways-lr] pb-2">TEXT (2)</td>
<td class="[writing-mode:sideways-lr] pb-2">TEXT (5)</td>
<td class="[writing-mode:sideways-lr] pb-2">TEXT (10)</td>
<td class="[writing-mode:sideways-lr] pb-2">TEXT (1.1)</td>
<td class="[writing-mode:sideways-lr] pb-2">TEXT (10)</td>
<td class="[writing-mode:sideways-lr] pb-2">TEXT (2)</td>
<td class="[writing-mode:sideways-lr] pb-2">TEXT (5)</td>
<td class="[writing-mode:sideways-lr] pb-2">TEXT (10)</td>
<td class="[writing-mode:sideways-lr] pb-2">TEXT (1.1)</td>
<td class="[writing-mode:sideways-lr] pb-2">TEXT (10)</td>
<td class="[writing-mode:sideways-lr] pb-2">TEXT (2)</td>
<td class="[writing-mode:sideways-lr] pb-2">TEXT (5)</td>
<td class="[writing-mode:sideways-lr] pb-2">TEXT (10)</td>
<td class="[writing-mode:sideways-lr] pb-2">TEXT (1.1)</td>
<td class="[writing-mode:sideways-lr] pb-2">TEXT (10)</td>
<td class="[writing-mode:sideways-lr] pb-2">TEXT (2)</td>
<td class="[writing-mode:sideways-lr] pb-2">TEXT (5)</td>
<td class="[writing-mode:sideways-lr] pb-2">TEXT (10)</td>
<td class="[writing-mode:sideways-lr] pb-2">TEXT (1.1)</td>
<td class="[writing-mode:sideways-lr] pb-2">TEXT (10)</td>
<td class="[writing-mode:sideways-lr] pb-2">TEXT (2)</td>
<td class="[writing-mode:sideways-lr] pb-2">TEXT (5)</td>
<td class="[writing-mode:sideways-lr] pb-2">TEXT (10)</td>
<td class="[writing-mode:sideways-lr] pb-2">TEXT (1.1)</td>
<td class="[writing-mode:sideways-lr] pb-2">TEXT (10)</td>
<td class="[writing-mode:sideways-lr] pb-2">TEXT (2)</td>
<td class="[writing-mode:sideways-lr] pb-2">TEXT (5)</td>
<td class="[writing-mode:sideways-lr] pb-2">TEXT (10)</td>
<td class="[writing-mode:sideways-lr] pb-2">TEXT (1.1)</td>
</tr>
</thead>
<tbody>
<tr>
<td class="text-right pr-2 text-nowrap">TEXT (10)</td>
<td class="matrix-box-red"><span class="text-ewhite">1</span></td>
<td class="matrix-box-red">1</td>
<td class="matrix-box-lightBlue">4</td>
<td class="matrix-box-darkBlue"><span class="text-ewhite">20</span></td>
<td class="matrix-box-red">1</td>
<td class="matrix-box-red"><span class="text-ewhite">1</span></td>
<td class="matrix-box-red">1</td>
<td class="matrix-box-lightBlue">4</td>
<td class="matrix-box-darkBlue"><span class="text-ewhite">20</span></td>
<td class="matrix-box-red">1</td>
<td class="matrix-box-red"><span class="text-ewhite">1</span></td>
<td class="matrix-box-red">1</td>
<td class="matrix-box-lightBlue">4</td>
<td class="matrix-box-darkBlue"><span class="text-ewhite">20</span></td>
<td class="matrix-box-red">1</td>
<td class="matrix-box-red"><span class="text-ewhite">1</span></td>
<td class="matrix-box-red">1</td>
<td class="matrix-box-lightBlue">4</td>
<td class="matrix-box-darkBlue"><span class="text-ewhite">20</span></td>
<td class="matrix-box-red">1</td>
<td class="matrix-box-red"><span class="text-ewhite">1</span></td>
<td class="matrix-box-red">1</td>
<td class="matrix-box-lightBlue">4</td>
<td class="matrix-box-darkBlue"><span class="text-ewhite">20</span></td>
<td class="matrix-box-red">1</td>
<td class="matrix-box-red"><span class="text-ewhite">1</span></td>
<td class="matrix-box-red">1</td>
<td class="matrix-box-lightBlue">4</td>
<td class="matrix-box-darkBlue"><span class="text-ewhite">20</span></td>
<td class="matrix-box-red">1</td>
<td class="matrix-box-red"><span class="text-ewhite">1</span></td>
<td class="matrix-box-red">1</td>
<td class="matrix-box-lightBlue">4</td>
<td class="matrix-box-darkBlue"><span class="text-ewhite">20</span></td>
<td class="matrix-box-red">1</td>
<td class="matrix-box-red"><span class="text-ewhite">1</span></td>
<td class="matrix-box-red">1</td>
<td class="matrix-box-lightBlue">4</td>
<td class="matrix-box-darkBlue"><span class="text-ewhite">20</span></td>
<td class="matrix-box-red">1</td>
</tr>
<tr>
<td class="text-right pr-2 text-nowrap">TEXT (10)</td>
<td class="matrix-box-red"><span class="text-ewhite">1</span></td>
<td class="matrix-box-red">1</td>
<td class="matrix-box-lightBlue">4</td>
<td class="matrix-box-darkBlue"><span class="text-ewhite">20</span></td>
<td class="matrix-box-red">1</td>
<td class="matrix-box-red"><span class="text-ewhite">1</span></td>
<td class="matrix-box-red">1</td>
<td class="matrix-box-lightBlue">4</td>
<td class="matrix-box-darkBlue"><span class="text-ewhite">20</span></td>
<td class="matrix-box-red">1</td>
<td class="matrix-box-red"><span class="text-ewhite">1</span></td>
<td class="matrix-box-red">1</td>
<td class="matrix-box-lightBlue">4</td>
<td class="matrix-box-darkBlue"><span class="text-ewhite">20</span></td>
<td class="matrix-box-red">1</td>
<td class="matrix-box-red"><span class="text-ewhite">1</span></td>
<td class="matrix-box-red">1</td>
<td class="matrix-box-lightBlue">4</td>
<td class="matrix-box-darkBlue"><span class="text-ewhite">20</span></td>
<td class="matrix-box-red">1</td>
<td class="matrix-box-red"><span class="text-ewhite">1</span></td>
<td class="matrix-box-red">1</td>
<td class="matrix-box-lightBlue">4</td>
<td class="matrix-box-darkBlue"><span class="text-ewhite">20</span></td>
<td class="matrix-box-red">1</td>
<td class="matrix-box-red"><span class="text-ewhite">1</span></td>
<td class="matrix-box-red">1</td>
<td class="matrix-box-lightBlue">4</td>
<td class="matrix-box-darkBlue"><span class="text-ewhite">20</span></td>
<td class="matrix-box-red">1</td>
<td class="matrix-box-red"><span class="text-ewhite">1</span></td>
<td class="matrix-box-red">1</td>
<td class="matrix-box-lightBlue">4</td>
<td class="matrix-box-darkBlue"><span class="text-ewhite">20</span></td>
<td class="matrix-box-red">1</td>
<td class="matrix-box-red"><span class="text-ewhite">1</span></td>
<td class="matrix-box-red">1</td>
<td class="matrix-box-lightBlue">4</td>
<td class="matrix-box-darkBlue"><span class="text-ewhite">20</span></td>
<td class="matrix-box-red">1</td>
</tr>
<tr>
<td class="text-right pr-2 text-nowrap">TEXT (10)</td>
<td class="matrix-box-red"><span class="text-ewhite">1</span></td>
<td class="matrix-box-red">1</td>
<td class="matrix-box-lightBlue">4</td>
<td class="matrix-box-darkBlue"><span class="text-ewhite">20</span></td>
<td class="matrix-box-red">1</td>
<td class="matrix-box-red"><span class="text-ewhite">1</span></td>
<td class="matrix-box-red">1</td>
<td class="matrix-box-lightBlue">4</td>
<td class="matrix-box-darkBlue"><span class="text-ewhite">20</span></td>
<td class="matrix-box-red">1</td>
<td class="matrix-box-red"><span class="text-ewhite">1</span></td>
<td class="matrix-box-red">1</td>
<td class="matrix-box-lightBlue">4</td>
<td class="matrix-box-darkBlue"><span class="text-ewhite">20</span></td>
<td class="matrix-box-red">1</td>
<td class="matrix-box-red"><span class="text-ewhite">1</span></td>
<td class="matrix-box-red">1</td>
<td class="matrix-box-lightBlue">4</td>
<td class="matrix-box-darkBlue"><span class="text-ewhite">20</span></td>
<td class="matrix-box-red">1</td>
<td class="matrix-box-red"><span class="text-ewhite">1</span></td>
<td class="matrix-box-red">1</td>
<td class="matrix-box-lightBlue">4</td>
<td class="matrix-box-darkBlue"><span class="text-ewhite">20</span></td>
<td class="matrix-box-red">1</td>
<td class="matrix-box-red"><span class="text-ewhite">1</span></td>
<td class="matrix-box-red">1</td>
<td class="matrix-box-lightBlue">4</td>
<td class="matrix-box-darkBlue"><span class="text-ewhite">20</span></td>
<td class="matrix-box-red">1</td>
<td class="matrix-box-red"><span class="text-ewhite">1</span></td>
<td class="matrix-box-red">1</td>
<td class="matrix-box-lightBlue">4</td>
<td class="matrix-box-darkBlue"><span class="text-ewhite">20</span></td>
<td class="matrix-box-red">1</td>
<td class="matrix-box-red"><span class="text-ewhite">1</span></td>
<td class="matrix-box-red">1</td>
<td class="matrix-box-lightBlue">4</td>
<td class="matrix-box-darkBlue"><span class="text-ewhite">20</span></td>
<td class="matrix-box-red">1</td>
</tr>
The rows repeat but I left them out. With css classes:
.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
Update: After spending multiple days on it I found a solution. By adding min-w-max it suddenly worked and the boxes kept the width and the scroll was like it was expected.
<div class="w-4/5 ml-[25%]">
<div class="overflow-sroll">
<table class="table-fixed overflow-sroll min-w-max">
<thead>
The margin on the right however does not work in any way (guessing the min-w-max class does it) but I do not mind anymore.