Question

我已经尝试解决这个问题几个小时了。有许多固定theads的插件，但它们似乎不适用于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的经验？

Answer 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>

修复了jQuery Mobile表中的thead

1 个答案: