我有一个嵌套在另一个表中的表(带滚动条)。外表没有滚动条。
外表的宽度设置为浏览器客户区宽度的100%。表格的最小宽度,但我们不需要进入,因为它不会导致手头的问题。
两个表的列宽都是百分比,以便在浏览器宽度更改时动态调整大小。
由于原生滚动条的宽度为17px(谷歌搜索),因此内部表格的列可以理解为不对齐,在向右移动时,会逐渐向左移动越来越多。
我最初有8列可见。右侧还有72个隐藏列。我使用jquery隐藏和显示不同的列集,一次12个。但只有初始显示有8列。
我不能只为内部表提供不同/较小的列宽百分比,因为当重新调整浏览器大小时,滚动条不会与表一起动态调整大小。
我尝试使用CSS calc()函数指定内部表的宽度;示例calc((100%+ 17px)* 10.5%)除最右边的列之外的所有列。那个人将首当其冲的滚动条(没关系)。
当然,100%是内桌的宽度;而这又是外表的100%
17px是原生滚动条的宽度
10.5%是外表的列宽
但这给了我非常大的第一列宽度,而其余的则被挤压在一起。
我尝试了使用calc()的不同公式,但没有结果......不同的结果,但仍未对齐。
我需要提一下,由于所涉及的列数,使用jquery / javascript动态地重新调整列宽被证明是缓慢且无法使用的。
以下是我想要的内容:
col 1 | col 2 | col 3 | col 4 | col 5 | col 6 | col 7 | col 8 | -------------------------------------------------------------------------------- value1 | value2 | value3 | value4 | value5 | value6 | value7 | value8 | ... |... |... |... |... |... |... |... | -------------------------------------------------------------------------------- value |value |value |value |value |value |value |value |↑| ... |... |... |... |... |... |... |... |⁞| ... |... |... |... |... |... |... |... |⁞| ... |... |... |... |... |... |... |... |↓| -------------------------------------------------------------------------------- ... |... |... |... |... |... |... |... | ... |... |... |... |... |... |... |... | ... |... |... |... |... |... |... |... |
中间的部分是内部表(带滚动条)
但这是我得到的:
col 1 | col 2 | col 3 | col 4 | col 5 | col 6 | col 7 | col 8 | -------------------------------------------------------------------------------- value1 | value2 | value3 | value4 | value5 | value6 | value7 | value8 | ... |... |... |... |... |... |... |... | -------------------------------------------------------------------------------- value |value |value |value |value |value |value |value |↑| ... |... |... |... |... |... |... |... |⁞| ... |... |... |... |... |... |... |... |⁞| ... |... |... |... |... |... |... |... |↓| -------------------------------------------------------------------------------- ... |... |... |... |... |... |... |... | ... |... |... |... |... |... |... |... | ... |... |... |... |... |... |... |... |
模拟并不准确,但你会得到漂移。内表的列宽相互相等,但模拟,就像我说的那样,有点偏。