javascript - 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 设置为较低的宽度 %。