Mam's WebSite
建築CGパース住宅CGパース

Mamの覚書Q&A検索

トップページMamの覚書Q&A検索WEB(jQueryMobile)⇒Q&A


大項目:「 WEB 」 - 中項目:「 jQueryMobile 」

「 jQueryMobileのテーブルウィジェットの基本 」

jQueryMobileのテーブルウィジェットの基本について


回答

jQueryMobileではテーブルに class="ui-responsive" を追加することによりレスポンシブテーブルにできます。
 
http://mam-mam.net/jqm_sample/table.html

ソース


テーブル(リフロー、レスポンシブ)
(ウィンドウの幅を狭くしたり広くすると表示が変わります。)
  <table data-role="table" id="tb1" data-mode="reflow" class="ui-responsive table-stroke">
    <thead>
      <tr>
        <th>番号</th>
        <th>本の名前</th>
        <th>出版年月</th>
        <th>コード</th>
        <th>その他</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>超簡単Delphi</td>
        <td>1940</td>
        <td>000001</td>
        <td>超簡単です</td>
      <tr>
        <td>2</td>
        <td>できたらDelphi</td>
        <td>1941</td>
        <td>000002</td>
        <td>できたらいいです</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Delphiいいね</td>
        <td>1943</td>
        <td>000003</td>
        <td>いいね</td>
      </tr>
    </tbody>
  </table>
 

テーブル(カラムトグル、レスポンシブ)
(PCの場合、ウィンドウの幅を狭くしたり広くすると表示カラムが変わります。)
  <table data-role="table" id="tb2" data-mode="columntoggle" class="ui-responsive table-stroke" data-column-btn-text="カラム選択">
    <thead>
      <tr>
        <th data-priority="1">番号</th>
        <th>本の名前</th>
        <th data-priority="2">出版年月</th>
        <th data-priority="3">コード</th>
        <th data-priority="4">その他</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>超簡単Delphi</td>
        <td>1940</td>
        <td>000001</td>
        <td>超簡単です</td>
      <tr>
        <td>2</td>
        <td>できたらDelphi</td>
        <td>1941</td>
        <td>000002</td>
        <td>できたらいいです</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Delphiいいね</td>
        <td>1943</td>
        <td>000003</td>
        <td>いいね</td>
      </tr>
    </tbody>
  </table>


Mam's WebSite