1

jqueryモバイルテーブルを調べました....しかし、コードをダウンロードする場所がわかりません....サンプルコードをダウンロードできる場所を教えてください....

http://jquerymobile.com/demos/1.3.0-beta.1/docs/tables/table-reflow.html

@media ( min-width: 40em ) {
    /* Show the table header rows and set all cells to display: table-cell */ 
    .my-custom-breakpoint td,
    .my-custom-breakpoint th,
    .my-custom-breakpoint tbody th,
    .my-custom-breakpoint tbody td,
    .my-custom-breakpoint thead td,
    .my-custom-breakpoint thead th {
        display: table-cell;
        margin: 0;
    }
    /* Hide the labels in each cell */ 
    .my-custom-breakpoint td .ui-table-cell-label,
    .my-custom-breakpoint th .ui-table-cell-label { 
        display: none;
    }
}
4

2 に答える 2

0

テーブルの tbody 要素の下にある th および td 要素からすべてのクラスを削除する必要があります。 

'http://jsfiddle.net/cptCX/3/'

この助けを願っています。

于 2013-04-16T12:31:44.523 に答える
0

これは、提供されたページのコードをコピーして貼り付けたものです。

[ページソース] をチェックして、ページの HTML コードを確認します (ページを右クリック > [ページ ソースを表示])。

<table data-role="table" id="movie-table" data-mode="reflow" class="ui-responsive table-stroke 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><b class="ui-table-cell-label">Rank</b>1</th>
      <td><b class="ui-table-cell-label">Movie Title</b><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external" class="ui-link">Citizen Kane</a></td>
      <td><b class="ui-table-cell-label">Year</b>1941</td>
      <td><b class="ui-table-cell-label">Rating</b>100%</td>
      <td><b class="ui-table-cell-label">Reviews</b>74</td>
    </tr>
    <tr>
      <th><b class="ui-table-cell-label">Rank</b>2</th>
      <td><b class="ui-table-cell-label">Movie Title</b><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external" class="ui-link">Casablanca</a></td>
      <td><b class="ui-table-cell-label">Year</b>1942</td>
      <td><b class="ui-table-cell-label">Rating</b>97%</td>
      <td><b class="ui-table-cell-label">Reviews</b>64</td>
    </tr>
    <tr>
      <th><b class="ui-table-cell-label">Rank</b>3</th>
      <td><b class="ui-table-cell-label">Movie Title</b><a href="http://en.wikipedia.org/wiki/The_Godfather" data-rel="external" class="ui-link">The Godfather</a></td>
      <td><b class="ui-table-cell-label">Year</b>1972</td>
      <td><b class="ui-table-cell-label">Rating</b>97%</td>
      <td><b class="ui-table-cell-label">Reviews</b>87</td>
    </tr>
    <tr>
      <th><b class="ui-table-cell-label">Rank</b>4</th>
      <td><b class="ui-table-cell-label">Movie Title</b><a href="http://en.wikipedia.org/wiki/Gone_with_the_Wind_(film)" data-rel="external" class="ui-link">Gone with the Wind</a></td>
      <td><b class="ui-table-cell-label">Year</b>1939</td>
      <td><b class="ui-table-cell-label">Rating</b>96%</td>
      <td><b class="ui-table-cell-label">Reviews</b>87</td>
    </tr>
    <tr>
      <th><b class="ui-table-cell-label">Rank</b>5</th>
      <td><b class="ui-table-cell-label">Movie Title</b><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)" data-rel="external" class="ui-link">Lawrence of Arabia</a></td>
      <td><b class="ui-table-cell-label">Year</b>1962</td>
      <td><b class="ui-table-cell-label">Rating</b>94%</td>
      <td><b class="ui-table-cell-label">Reviews</b>87</td>
    </tr>
    <tr>
      <th><b class="ui-table-cell-label">Rank</b>6</th>
      <td><b class="ui-table-cell-label">Movie Title</b><a href="http://en.wikipedia.org/wiki/Dr._Strangelove" data-rel="external" class="ui-link">Dr. Strangelove Or How I Learned to Stop Worrying and Love the Bomb</a></td>
      <td><b class="ui-table-cell-label">Year</b>1964</td>
      <td><b class="ui-table-cell-label">Rating</b>92%</td>
      <td><b class="ui-table-cell-label">Reviews</b>74</td>
    </tr>
    <tr>
      <th><b class="ui-table-cell-label">Rank</b>7</th>
      <td><b class="ui-table-cell-label">Movie Title</b><a href="http://en.wikipedia.org/wiki/The_Graduate" data-rel="external" class="ui-link">The Graduate</a></td>
      <td><b class="ui-table-cell-label">Year</b>1967</td>
      <td><b class="ui-table-cell-label">Rating</b>91%</td>
      <td><b class="ui-table-cell-label">Reviews</b>122</td>
    </tr>
    <tr>
      <th><b class="ui-table-cell-label">Rank</b>8</th>
      <td><b class="ui-table-cell-label">Movie Title</b><a href="http://en.wikipedia.org/wiki/The_Wizard_of_Oz_(1939_film)" data-rel="external" class="ui-link">The Wizard of Oz</a></td>
      <td><b class="ui-table-cell-label">Year</b>1939</td>
      <td><b class="ui-table-cell-label">Rating</b>90%</td>
      <td><b class="ui-table-cell-label">Reviews</b>72</td>
    </tr>
    <tr>
      <th><b class="ui-table-cell-label">Rank</b>9</th>
      <td><b class="ui-table-cell-label">Movie Title</b><a href="http://en.wikipedia.org/wiki/Singin%27_in_the_Rain" data-rel="external" class="ui-link">Singin' in the Rain</a></td>
      <td><b class="ui-table-cell-label">Year</b>1952</td>
      <td><b class="ui-table-cell-label">Rating</b>89%</td>
      <td><b class="ui-table-cell-label">Reviews</b>85</td>
    </tr>
    <tr>
      <th><b class="ui-table-cell-label">Rank</b>10</th>
      <td class="title"><b class="ui-table-cell-label">Movie Title</b><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external" class="ui-link">Inception</a></td>
      <td><b class="ui-table-cell-label">Year</b>2010</td>
      <td><b class="ui-table-cell-label">Rating</b>84%</td>
      <td><b class="ui-table-cell-label">Reviews</b>78</td>
    </tr>
  </tbody>
</table>

CSS - テーブルをレスポンシブにします。

@media ( min-width: 40em ) {
/* Show the table header rows and set all cells to display: table-cell */ 
.my-custom-breakpoint td,
.my-custom-breakpoint th,
.my-custom-breakpoint tbody th,
.my-custom-breakpoint tbody td,
.my-custom-breakpoint thead td,
.my-custom-breakpoint thead th {
    display: table-cell;
    margin: 0;
}
/* Hide the labels in each cell */ 
.my-custom-breakpoint td .ui-table-cell-label,
.my-custom-breakpoint th .ui-table-cell-label { 
    display: none;
}
}
于 2013-03-29T22:39:02.097 に答える