Question

我有一张从jQuery mobile website复制的表，在调整浏览器大小时不会重排：

<!DOCTYPE html>
<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">

<title>Table Reflow</title>

</head>

<body data-role="page">

<h1>Table reflow</h1>
<div class="ui-content">
<table data-role="table" id="movie-table" data-mode="reflow" class="ui-responsive">
<thead>
<tr>
  <th data-priority="1">Rank</th>
  <th data-priority="persist">Movie Title</th>
  <th data-priority="2">Year</th>
  <th data-priority="3"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
  <th data-priority="4">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>
</tbody>
</table>
</div>
</body>
</html>

为什么桌子不会回流？脚本是有效的URL，表格代码直接来自jQuery Mobile。

Answer 1

点击http://demos.jquerymobile.com/1.4.5/table-reflow/上的查看来源会显示一个包含 ui-responsive 类别的表格。这是我最初复制的内容。

但是，如果你检查http://demos.jquerymobile.com/1.4.5/table-reflow/上的表，他们实际上又添加了两个类，ui-table和ui-table-reflow：

添加这些附加类可以解决问题。以下是修订后的工作页面：

<!DOCTYPE html>
<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">

<title>Table Reflow</title>

</head>

<body data-role="page">

<h1>Table reflow</h1>
<div class="ui-content">
<table data-role="table" id="movie-table" data-mode="reflow" class="ui-responsive ui-table ui-table-reflow">
<thead>
<tr>
  <th data-priority="1">Rank</th>
  <th data-priority="persist">Movie Title</th>
  <th data-priority="2">Year</th>
  <th data-priority="3"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
  <th data-priority="4">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>
</tbody>
</table>
</div>
</body>
</html>

jQuery移动表重排不起作用

1 个答案: