时间戳

首页 > 解决方案 > jQuery UI 图标通过 tablesorter CSS Sticky Header 流血

jquery-ui - jQuery UI 图标通过 tablesorter CSS Sticky Header 流血

问题描述

我有一个简单的 Web 应用程序，它使用 jQuery (v1.12.4)、jQuery UI (v1.12.1) 和 tablesorter 插件 (v2.30.5)。我也在使用 tablesorter CSS Sticky Header Widget，这就是我遇到麻烦的地方。

在应用程序的一个页面上，我显示了一个 HTML 表格，其中一列包含一个 jQuery UI 图标，该图标是另一个页面的链接。我使用 tablesorter CSS Sticky Header Widget 来保持表格标题行在页面滚动时可见。

我的问题是，当您向下滚动页面时，表格行开始从浏览器窗口的顶部移开，每行中的 jQuery UI 图标会从粘性标题行中渗出，看起来很糟糕。

请注意，如果我用 .png 文件中的图像替换 jQuery UI 图标，我看不到问题。

当使用 jQuery UI 图标和 Firefox 作为我的浏览器时，我可以通过向表格元素添加 CSSz-index: 1来获得使图标消失在粘性标题后面的所需行为。<thead>当使用 Internet Explorer 作为我的浏览器时，我可以通过将 CSSz-index: 1放在<td>有问题的列标题的元素上来获得所需的行为。但是，我在使用 Chrome 时没有找到任何解决方案，它恰好是我的目标受众的首选浏览器。

示例代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="jQuery/jquery-ui-themes-1.12.1/jquery-ui.min.css">
        <link rel="stylesheet" href="jQuery/tablesorter-master/css/theme.blue.css">
    </head>

    <body>
        <table id="table1">
            <thead>
                <tr>
                    <td>Column1</td>
                    <td>Column2</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>r1c1</td>
                    <td><span class="ui-icon ui-icon-document"></span></td>
                </tr>
                <tr>
                    <td>r2c1</td>
                    <td><span class="ui-icon ui-icon-document"></span></td>
                </tr>
                <tr>
                    <td>r3c1</td>
                    <td><span class="ui-icon ui-icon-document"></span></td>
                </tr>
                <tr>
                    <td>r4c1</td>
                    <td><span class="ui-icon ui-icon-document"></span></td>
                </tr>
                <tr>
                    <td>r5c1</td>
                    <td><span class="ui-icon ui-icon-document"></span></td>
                </tr>
                <tr>
                    <td>r6c1</td>
                    <td><span class="ui-icon ui-icon-document"></span></td>
                </tr>
                <tr>
                    <td>r7c1</td>
                    <td><span class="ui-icon ui-icon-document"></span></td>
                </tr>
                <tr>
                    <td>r8c1</td>
                    <td><span class="ui-icon ui-icon-document"></span></td>
                </tr>
                <tr>
                    <td>r9c1</td>
                    <td><span class="ui-icon ui-icon-document"></span></td>
                </tr>
                <tr>
                    <td>r10c1</td>
                    <td><span class="ui-icon ui-icon-document"></span></td>
                </tr>
            </tbody>
        </table>

        <script src="jQuery/jquery-1.12.4.min.js"></script>
        <script src="jQuery/jquery-ui-1.12.1/jquery-ui.min.js"></script>
        <script src="jQuery/tablesorter-master/js/jquery.tablesorter.js"></script>
        <script src="jQuery/tablesorter-master/js/widgets/widget-cssStickyHeaders.js"></script>

        <script>
            $(document).ready(function() {
                $("#table1").tablesorter({
                    theme: "blue",

                    widgets: ["cssStickyHeaders"]
                });
            });
        </script>
    </body>
</html>

标签： jquery-uitablesorter

解决方案

“最简单”的解决方案是给图标一个负 z-index，然后从表格中删除所有背景颜色。这种方法的问题在于，如果要添加斑马条纹，则必须使用更复杂的方法来实现（查看css highlighting demo中的 css ）。

看看这个方法是否适合你（演示）：

.tablesorter-blue, .tablesorter-blue td {
  background: transparent;
}
.ui-icon {
  position: relative;
  z-index: -1;
}

推荐阅读