Side-by-Side Tables not working properly in Version 0.5.0-beta.1 and 0.4.3

[ef-anemetzfiedler]

When trying to display two tables side by side using flexbox, the behavior is strange when the tables are longer than one page. This is an issue with 0.5.0-beta.1 as well as 0.4.3, so I don't think the recent changes caused this behavior.

The first behavior I could observe is that the second table gets moved to the second page, with the first table taking up the entire width of the first page: example-side-by-side-table-second-table-on-next-page.txt

After changing the padding of the table cells, I was able to observe a different (arguably more correct) behavior - the tables are side by side on both pages, but the shorter table gets stretched to the length of the longer table: example-side-by-side-table-both-tables-next-to-eachother.txt

Note however that in this case the break on the left table seems to omit the other two columns and instead moves them to the next page:

Increasing the margin a little to move both tables further down the page produces a different result. An empty row is generated: example-side-by-side-table-empty-row.txt

Increasing the margin a little more produces a different-looking empty row: example-side-by-side-table-empty-row-2.txt

A problem I was not able to reproduce in a self-contained html document is that sometimes the first table cell is split, and the rest of the table row is completely missing. I was trying to increase the padding of the table cells to reproduce it, but ran into the very first described issue instead:

I would like to be able to:

• consistently display two tables side by side
• have the length of the two tables be independent of eachother
• have the same sort of behavior apply to both tables on a page break as with one table

If anybody knows of a different method to get tables to correctly display side by side in the meantime, any tips would be greatly appreciated!

[julientaq]

so it seems that there a re a couple of different issues in there.

1. when there is a break-inside:avoid for a tr, it breaks the flex layout and the table are not next to each other anymore because the calculation of the break happens before the second page is added. There are couple options there, but my take is that we should definitely reset the way define the break-inside: avoid with the new version when usinf flax or the grid.

2. the height of the cells problem is a result of flexbox that will put the height of two element in the flex of the same height (or width, depending of the direction). To avoid that, you want to add a align-items: flex-start on the element that start the flex.

But none of them are easy because they affect how the table are set up and how the breaking appears. We need to look a bit closer to what happens.

[julientaq]

my take is that the way the browser paints the table make it go outside the page and generate a page break before the second table is added. I think we need to look at how @NigelCunningham implemented multiple breaks to see if there is a better way to do it.

[julientaq]

i tested a bit more and it doesnt seem that the newest version of pagedjs supports multi pages flex. i don’t understand why it works on your end, but i would assume it’s because it’s leveraging the code for the table (with multiple break possible).

@NigelCunningham would that be a possible thing?

[ef-anemetzfiedler]

@julientaq The behavior seemed very unstable to me and depending on the size and shape of the table(s) it either works side-by-side or it doesn't.

Edit: flex-wrap: no-wrap; seems to be important to have it work more consistently for displaying side-by-side. However, as demonstrated by the first file I posted, the "non-side-by-side" case still happens despite this property being set.

[NigelCunningham]

I agree with your assessment of things @julientaq . I never considered the possibility of two tables side by side, though I think it should be workable. One of the changes is that we explicitly render top level DOM elements to completion before looking for overflow, so having both tables in a flex is not something that's breaking the mould.

I'll see if I can look into it tomorrow.