无法让 jQuery floatThead 处理嵌入在选项卡式图层中的表

Cannot get jQuery floatThead to work on table embedded in tabbed layers

本文关键字:选项 图层 jQuery floatThead 处理      更新时间:2023-09-26

我放弃了尝试让我以前的尝试在可滚动表上的固定标题上正常工作,我求助于这个插件:http://mkoryak.github.io/floatThead/

我工作的 Web 界面以两种方式显示此特定视图的表格 - 带有选项卡或直接显示表格。

以下是带有选项卡的结构:

<div class="tab-content">
    <div class="tab-pane  active" id="tab1">
    ... a couple stuff
    <table  id='resizable118' cellpadding='5' cellspacing='0' border='0' Width='75%' leftmargin='50' >
        ... stuff in the table every row has font size of 3 but that's it
    </table>
    </div>
</div>

这是没有选项卡的结构:

<table  id='resizable118' cellpadding='5' cellspacing='0' border='0' Width='75%' leftmargin='50' >
     ... stuff in the table every row has font size of 3 but that's it
</table>

如您所见,两者的表生成方式完全相同。唯一的区别是将选项卡式视图的表括起来的两个<div>元素。

该插件指示将表包装在类似于div 元素的东西中。当我在不使用选项卡时用div 元素包装表格然后激活插件时,一切都很好。

问题:无论我使用新的div 元素包装表格还是使用现有的 <div> 元素之一,当使用选项卡式视图时,表格都会中断。

表头和正文被水平挤压,然后之后没有任何列将对齐。当我破坏插件使用时,一切恢复正常。

以前有没有人见过jQuery floatThead?如何解决选项卡式表视图的问题?

从文档 (http://mkoryak.github.io/floatThead/) 中有一个"回流"方法,

因此,将 OnClick 事件添加到包含该表的选项卡中,

onclick="$table.floatThead('reflow');"

我以这种方式制作的作品:)