I'm in the process of rendering tables that are defined by an XBRL Taxonomy. I've chosen to use css-grid because some structures are deeply nested tables. An example can be found here: Blancesheet
Most of the time css-grid behaves exactly as intended, things go awry when the content starts to overflow on the x-axis. Movement schedule. Instead of max-content the browser decides that min-width is what is used.
The table-grid is defined as followed:
display: grid;
grid-template-columns: repeat(x, minmax(100px, max-content));
grid-template-rows: repeat(y, minmax(30px, max-content));
where x and y are of course the number of columns and rows in the table. Is there any way to tell the browser to adhere max-content instead of falling back to 100px?
A second problem, which is a result of the chosen method. The table 4 has a nested label-structure on the third row. This is accomplished by using a 2 columns wide div, where the children are 1 column wide. But the outer label is long and will take two lines. As a result the first child-label will overlap. Any thoughts how to address this and make the outer div take more space?
Any suggestion is welcome, I tried a lot, but so far out of luck