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 中，则将相应的 th 设置为较低的宽度 %。