如何修复具有粘性标题以及排序和搜索的表格的大小？

Posted 2023-03-31

【中文标题】如何修复具有粘性标题以及排序和搜索的表格的大小？

【英文标题】：How to fix the size of a table having a sticky header as well as sorting and searching?

【发布时间】：2013-11-28 06:46:27

【问题描述】：

我有一个带有排序搜索和粘性表格标题的表格。 我面临的第一个问题是无法将表头贴在桌子上。在滚动它时它会粘在窗口上。 其次，我无法调整表格的宽度和高度。当我把它放在div 标签内时，粘性标题不起作用

请帮助我如何实现。

<script id="js">$(function()
    $("table").tablesorter(
        widthFixed : true,
        showProcessing: true,
        headerTemplate : 'content icon', 
        // Add icon for jui theme; new in v2.7!
        widgets: [ 'uitheme', 'zebra', 'stickyHeaders', 'filter' ],
        widgetOptions: 
           // extra css class name applied to the sticky header row (tr) - changed in v2.11
          stickyHeaders : '',
          // adding zebra striping, using content and default styles - the ui css removes the background from default
          // even and odd class names included for this demo to allow switching themes
          zebra   : ["ui-widget-content even", "ui-state-default odd"],
          // use uitheme widget to apply defauly jquery ui (jui) class names
          // see the uitheme demo for more details on how to change the class names
          uitheme : 'jui'
        
    );

);</script>

这是css的js文件

  <script src="js/jquery.tablesorter.widgets.js"></script>

【问题讨论】：

stickyHeaders 小部件目前无法“粘”到其父元素；它只坚持浏览器窗口。有一个open issue 已经发布了，我只是还没开始。

感谢回复...如果解决方案出现请分享..

【参考方案1】：

尝试像我在 jsfiddle 上所做的一样：

[http://jsfiddle.net/Ziad/2EZjJ/][1]

【参考方案2】：

现在有 css sticky header widget，但仍处于 beta 测试阶段。

虽然上面共享的当前可用版本不允许将粘性标头附加到其父级，但有一个具有此功能的demo in the works（有关更新，请参阅this issue）。最后一个需要克服的问题是让标题在 Firefox 中正确粘贴（cssStickyHeaders_addCaption 选项）。

$(function () 

    $("table").tablesorter(
        widgets: ['cssStickyHeaders'],
        widgetOptions: 
            cssStickyHeaders_offset: 0,
            cssStickyHeaders_addCaption: true,
            cssStickyHeaders_attachTo: null
        
    );

);

我希望能帮助我找到任何其他需要解决的问题，除了边界不留在粘性单元格中（哈哈，我不知道如何解决这个问题）。