Значок jQuery UI пропускает через CSS Tabley Header - PullRequest
Новая
       13

Значок jQuery UI пропускает через CSS Tabley Header

0 голосов
/ 08 июня 2018

У меня есть простое веб-приложение, которое использует jQuery (v1.12.4), jQuery UI (v1.12.1) и плагин TableSorter (v2.30.5).Я также использую виджет CSS Sticky Header табличного сортировщика, и именно здесь у меня возникают проблемы.

На одной странице приложения я отображаю таблицу HTML, где один из столбцов содержит значок пользовательского интерфейса jQuery, который являетсяссылка на другую страницу.Я использую CSS Sticky Header Widget для сортировки таблиц, чтобы держать строку заголовка таблицы видимой при прокрутке страницы.

Моя проблема заключается в том, что при прокрутке страницы вниз, и строки таблицы начинают перемещаться за верхнюю часть окна браузера,Значок jQuery UI в каждой строке просвечивает строку липкого заголовка и выглядит ужасно.

Обратите внимание, что я не вижу проблемы, если я заменяю значок jQuery UI изображением из файла .png.

При использовании значка пользовательского интерфейса jQuery и Firefox в качестве браузера я могу добиться того, чтобы значок исчезал за липким заголовком, добавив CSS z-index: 1 к элементу <thead> таблицы.При использовании Internet Explorer в качестве браузера я могу получить желаемое поведение, поместив CSS z-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>

1 Ответ

0 голосов
/ 08 июня 2018

«Самым простым» решением было бы придание значкам отрицательного z-индекса, а затем удаление всех цветов фона из таблицы.Проблема с этим методом заключается в том, что если вы хотите добавить чередование зебр, вам придется использовать более сложный метод для его достижения (см. Демонстрационную версию css ).

Посмотрите, работает ли этот метод для вас ( демо ): 

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