0

まず、JQueryモバイルテーブルを使用して5列のテーブルを作成したいと思います。これが私のコードです：

<table>
  <thead>
    <tr>
      <th scope="col">検査項目</th>
      <th scope="col">半日ドック&lt;/th>
      <th scope="col">1泊ドック</th>
      <th scope="col">2泊ドック</th>
      <th scope="col">検診内容</th>
    </tr> 
  </thead>

  <tbody> 
    <tr>
      <th>診察</th>
      <td>○&lt;/td>
      <td>○&lt;/td>
      <td>○&lt;/td>
      <td>問診・聴打診</td>
    </tr>
  </tbody>
</table>

そして私のCSSは：

table {
  width:100%;
  font-size:9px;
  background:#FAFBF5;
}

th {
  text-align:center;
  background:#C2E195;
  font-size:9px;
  border:1px solid;
}

td {
  text-align:center;
  background:#FFFFFF;
  border:1px solid;
}

1つの問題は、Sony Ericssonなどでは正常に機能しますが、iPhoneでは機能しないことです。次に、次のコードを試しました。

<div class="ui-grid-d">
  <div class="ui-block-a">
    <div class="ui-bar-d" style="background:#C2E195; font-size:8px; color:#000000; text-align:center; height:50px">検査項目</div>
  </div>
  <div class="ui-block-b">
    <div class="ui-bar-d" style="background:#ffffff; font-size:8px; color:#000000; text-align:center; height:50px">半日ドック&lt;/div>
  </div>
  <div class="ui-block-c">
    <div class="ui-bar-d" style="background:#ffffff; font-size:8px; color:#000000; text-align:center; height:50px">1泊ドック</div>
  </div>
  <div class="ui-block-d">
    <div class="ui-bar-d" style="background:#ffffff; font-size:8px; color:#000000; text-align:center; height:50px">2泊ドック</div>
  </div>
  <div class="ui-block-e">
    <div class="ui-bar-d" style="background:#ffffff; font-size:8px; color:#000000; text-align:center; height:50px">検診内容</div>
  </div>

問題は、iPhoneではうまく機能するが、SonyEricssonでは機能しないことです。

どうすれば両方のプラットフォームでこれを機能させることができますか？

4

1 に答える 1

0

JQM には (まだ) テーブル ウィジェットがありません。それまでの間、私のウィジェット テーブルビュー ( example / Github )を使用できます。

これにより、いくつかのレスポンシブ機能を備えた基本的な JQM テーブル レイアウトが得られます。iOS、Android 2.3、およびデスクトップ以外では実際にテストしていません。うまくいきますので、ぜひお試しください。

于 2012-10-07T09:59:58.900 に答える