In my current project, I am developing a reporting feature that allows users to select various elements to include in their report. The number of elements available can change based on the user's preferences, and each element may contain user-generated content.
The reports can be printed directly from the browser, exported as PDF files, or previewed within the browser. Users also have the option to choose between landscape and portrait modes to suit their needs.
My question pertains to designing a table that always fills 100% of the width (for example, DIN A4 size for printing) while ensuring that the column widths adjust dynamically according to the content. Is there a way to set the column widths to match the content, but with the ability for overflow at a certain point?
If I define the table style as follows:
.reportTable{
width: 100%;
min-width: 100%;
max-width: 100%;
}
and apply the following style to the th elements:
.reportTable th{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
The resulting table will have equal-sized columns with overflowing content appropriately hidden if too lengthy.
However, I encountered an issue where columns containing only numbers take up the same space as those displaying longer text, leading to wasteful space allocation when printing. To address this, I tried changing the table style to:
.reportTable{
width: auto;
min-width: 100%;
max-width: 100%;
}
This adjusted the column sizes based on content, but it caused the table to exceed 100% width when content was too long, resulting in an "out of bounds" display.
Is there a pure CSS solution for this issue, or would JavaScript/jQuery be necessary? I prefer not to rely on plugins or external libraries for this functionality.