如何对齐嵌套表的列(内表有滚动条)?

时间:2015-08-28 17:51:01

标签: javascript jquery html css

我有一个嵌套在另一个表中的表(带滚动条)。外表没有滚动条。

外表的宽度设置为浏览器客户区宽度的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          |↑|
...    |...     |...     |...     |...     |...     |...     |...            |⁞|
...    |...     |...     |...     |...     |...     |...     |...            |⁞|
...    |...     |...     |...     |...     |...     |...     |...            |↓|
--------------------------------------------------------------------------------
...     |...      |...      |...      |...      |...      |...      |...       |
...     |...      |...      |...      |...      |...      |...      |...       |
...     |...      |...      |...      |...      |...      |...      |...       |

模拟并不准确,但你会得到漂移。内表的列宽相互相等,但模拟,就像我说的那样,有点偏。

0 个答案:

没有答案