修复了 jQuery Mobile 表中的标题答案

【问题标题】：Fixed thead in jQuery Mobile table修复了 jQuery Mobile 表中的标题
【发布时间】：2017-08-13 05:06:46
【问题描述】：

我已经尝试解决这个问题几个小时了。有很多固定主题的插件，但似乎没有一个可以与 jQuery Mobile 一起使用。

例如： http://mkoryak.github.io/floatThead/

我也尝试用 CSS 解决这个问题，这或多或少都有效。但是th列的宽度和td的不一样。

HTML：

<div data-role="header" data-theme="a" data-position="fixed" data-tap-toggle="false">
<h1>test</h1>
</div>
<div data-role="content">
<table data-role="table" id="table-custom-2" data-mode="columntoggle" class="ui-body-d ui-shadow table-stripe ui-responsive" data-column-btn-theme="b" data-column-btn-text="Columns to display..." data-column-popup-theme="a">
    <thead>
      <tr class="ui-bar-d">
        <th data-priority="2">Rank</th>
        <th>Movie Title</th>
        <th data-priority="3">Year</th>
        <th data-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
        <th data-priority="5">Reviews</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>1</th>
        <td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td>
        <td>1941</td>
        <td>100%</td>
        <td>74</td>
      </tr>
      <tr>
        <th>2</th>
        <td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external">Casablanca</a></td>
        <td>1942</td>
        <td>97%</td>
        <td>64</td>
      </tr>
      <tr>
        <th>3</th>
        <td><a href="http://en.wikipedia.org/wiki/The_Godfather" data-rel="external">The Godfather</a></td>
        <td>1972</td>
        <td>97%</td>
        <td>87</td>
      </tr>
      <tr>
        <th>4</th>
        <td><a href="http://en.wikipedia.org/wiki/Gone_with_the_Wind_(film)" data-rel="external">Gone with the Wind</a></td>
        <td>1939</td>
        <td>96%</td>
        <td>87</td>
      </tr>
      <tr>
        <th>5</th>
        <td><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)" data-rel="external">Lawrence of Arabia</a></td>
        <td>1962</td>
        <td>94%</td>
        <td>87</td>
      </tr>
      <tr>
        <th>6</th>
        <td><a href="http://en.wikipedia.org/wiki/Dr._Strangelove" data-rel="external">Dr. Strangelove Or How I Learned to Stop Worrying and Love the Bomb</a></td>
        <td>1964</td>
        <td>92%</td>
        <td>74</td>
      </tr>
      <tr>
        <th>7</th>
        <td><a href="http://en.wikipedia.org/wiki/The_Graduate" data-rel="external">The Graduate</a></td>
        <td>1967</td>
        <td>91%</td>
        <td>122</td>
      </tr>
      <tr>
        <th>8</th>
        <td><a href="http://en.wikipedia.org/wiki/The_Wizard_of_Oz_(1939_film)" data-rel="external">The Wizard of Oz</a></td>
        <td>1939</td>
        <td>90%</td>
        <td>72</td>
      </tr>
      <tr>
        <th>9</th>
        <td><a href="http://en.wikipedia.org/wiki/Singin%27_in_the_Rain" data-rel="external">Singin' in the Rain</a></td>
        <td>1952</td>
        <td>89%</td>
        <td>85</td>
      </tr>
      <tr>
        <th>10</th>
        <td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td>
        <td>2010</td>
        <td>84%</td>
        <td>78</td>
      </tr>
      <tr>
        <th>10</th>
        <td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td>
        <td>2010</td>
        <td>84%</td>
        <td>78</td>
      </tr>
      <tr>
        <th>10</th>
        <td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td>
        <td>2010</td>
        <td>84%</td>
        <td>78</td>
      </tr>
      <tr>
        <th>10</th>
        <td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td>
        <td>2010</td>
        <td>84%</td>
        <td>78</td>
      </tr>
      <tr>
        <th>8</th>
        <td><a href="http://en.wikipedia.org/wiki/The_Wizard_of_Oz_(1939_film)" data-rel="external">The Wizard of Oz</a></td>
        <td>1939</td>
        <td>90%</td>
        <td>72</td>
      </tr>
      <tr>
        <th>9</th>
        <td><a href="http://en.wikipedia.org/wiki/Singin%27_in_the_Rain" data-rel="external">Singin' in the Rain</a></td>
        <td>1952</td>
        <td>89%</td>
        <td>85</td>
      </tr>
      <tr>
        <th>10</th>
        <td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td>
        <td>2010</td>
        <td>84%</td>
        <td>78</td>
      </tr>
      <tr>
        <th>10</th>
        <td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td>
        <td>2010</td>
        <td>84%</td>
        <td>78</td>
      </tr>
      <tr>
        <th>10</th>
        <td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td>
        <td>2010</td>
        <td>84%</td>
        <td>78</td>
      </tr>
      <tr>
        <th>10</th>
        <td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td>
        <td>2010</td>
        <td>84%</td>
        <td>78</td>
      </tr>
      <tr>
        <th>8</th>
        <td><a href="http://en.wikipedia.org/wiki/The_Wizard_of_Oz_(1939_film)" data-rel="external">The Wizard of Oz</a></td>
        <td>1939</td>
        <td>90%</td>
        <td>72</td>
      </tr>
      <tr>
        <th>9</th>
        <td><a href="http://en.wikipedia.org/wiki/Singin%27_in_the_Rain" data-rel="external">Singin' in the Rain</a></td>
        <td>1952</td>
        <td>89%</td>
        <td>85</td>
      </tr>
      <tr>
        <th>10</th>
        <td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td>
        <td>2010</td>
        <td>84%</td>
        <td>78</td>
      </tr>
      <tr>
        <th>10</th>
        <td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td>
        <td>2010</td>
        <td>84%</td>
        <td>78</td>
      </tr>
      <tr>
        <th>10</th>
        <td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td>
        <td>2010</td>
        <td>84%</td>
        <td>78</td>
      </tr>
      <tr>
        <th>10</th>
        <td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td>
        <td>2010</td>
        <td>84%</td>
        <td>78</td>
      </tr>
    </tbody>
  </table>
<div>
<div data-role="footer" data-theme="a" data-position="fixed" data-tap-toggle="false" >
<h1>test</h1>
</div><!-- /footer -->

CSS：

* {
    padding: 0;
    margin: 0;
}
thead {
    position: fixed;
    top: 44px;
    left: 15px;
    background-color: white;
}
table {
    margin-top: 25px;
}
.ui-table-columntoggle-btn {
    display: none !important;
}

jsfiddle

还有更多，但我没有足够的代表来发布更多内容。

有人对 jQM 和固定 theads 有任何经验吗？

【问题讨论】：

你用什么 jQuery 来尝试做你想做的事？你链接到一个 jsfiddle 并且你用两个与 jQuery 相关的标签标记了帖子，但我绝对看不到 jQuery。
我是 floatThead 的作者 - 我很好奇为什么你认为它不适用于 jquery mobile？我认为确实如此，但您只需要了解 jquery mobile 如何加载页面的细微差别以及这对您如何初始化插件意味着什么
@mkoryak 我用我的 jQueryMobile 应用程序尝试了你的插件，插件在我的表容器外创建了一个 div。赋予该 div 的位置是绝对的。当我滚动我的页面时，我的头没有得到修复。当我在您的页面中看到 div 的顶部是动态更新的..但对于我的页面它没有。我已经用下面的代码初始化了插件.. $("#tableItems").floatThead({ scrollContainer: function ($table) { return $table.closest('#tableContainer'); } });
请使用github报告问题。他们可以变成一个很长的来回，而stackoverflow不是一个合适的地方。

标签： jquery html css jquery-mobile html-table

【解决方案1】：

正如mkoryak 在他的回复中所说，floatThead 与 jQuery Mobile 配合使用。我刚刚遇到了对我的网站的同样需求。我使用了 jQuery 2.1.1 和 jQM 1.4.4。

代码如下：

<html>
  <head>
    ...
  </head>
        <div data-role="page">
            <div data-role="header">...</div>
            <!-- /header -->

            <div id="contentContainer" class="ui-content">
                <div id="tableContainer">
                    <table data-role="table" class="ui-responsive table-stroke table-stripe" id="tableItems">
                        <thead>
                            <tr>
                                <th>COL 1</th>
                                <th>COL 2</th>
                                <th>COL 3</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>FIELD 1A</td>
                                <td>FIELD 2A</td>
                                <td>FIELD 3A</td>
                            </tr>
                            <tr>
                                <td>FIELD 1B</td>
                                <td>FIELD 2B</td>
                                <td>FIELD 3B</td>
                            </tr>
                            <tr>
                                <td>FIELD 1C</td>
                                <td>FIELD 2C</td>
                                <td>FIELD 3C</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- /content -->

            <div data-role="footer">...</div>
            <!-- /footer -->
        </div>
        ...
    </body>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#tableItems").floatThead({
                scrollContainer: function ($table) {
                    return $table.closest('#contentContainer');
                }
            });
        });
    </script>
</html>

【讨论】：

我完全按照你的建议做了，但没有运气......它不起作用！发生的情况是我的头在页眉上流动然后上升..你能建议在配置中是否需要做任何额外的事情..