100％宽度的自动化桌子

Question

我正在构建某种报告功能，用户可以选择多个元素作为报告的一部分。 可能元素的数量可以根据用户需求而变化。 此外，每个元素的内容也可能因用户内容而异。

报告可以通过浏览器打印，导出为pdf或只在浏览器中预览。它也可以设置横向/纵向模式，以获得最符合需求的东西。

问题：有没有办法让表格始终为100％宽度（例如用于打印的DIN A4尺寸），并且列宽与匹配的内容在某个给定点溢出？

如果我将表格样式设置为

.reportTable{
    width: 100%;
    min-width: 100%;
    max-width: 100%;    
}

以及th到

的样式

.reportTable th{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

呈现的表格具有正确的大小，并且所有列的大小相同，并且如果内容太长则隐藏它的内容。

这就是问题所在。如果一列仅显示一个数字，则它与显示用户名称的列占用的空间相同。对于打印（空间不是无限的），这是一个丢失的空间，可用于其他可能被切断的东西。

将其更改为

.reportTable{
    width: auto;
    min-width: 100%;
    max-width: 100%;    
}

将根据内容调整列的大小。但是，如果内容太长，表格将超过100％（某种超出界限）。

有没有办法用纯css来做这件事，或者我需要javascript / jQuery（这肯定是一个选项）？ 没有插件或外部的东西。

Answer 1

您可以将表格宽度保持在100％。无论屏幕大小如何，它都将根据分辨率进行设置。对于表标题，在“％”中定义宽度，以便它可以采用该比例的列宽度。如果数字在td中分别设置为较低的宽度％。