0

モバイルフレンドリーにしようとしているテーブルがあります。以下を参照してください。

<tbody>
<tr>
  <td>one</td>
  <td>one</td>
  <td>one</td>
</tr> 
<tr>
  <td>two</td>
  <td>two</td>
  <td>two</td>
</tr> 
</tbody>

このテーブルの単一の列を作成して、モバイルでの表示を改善したいと考えています。概念的には、 /td:last of types を除く各 /td の後に /tr を追加することを考えています

私のテーブルは動的に生成されるため、動的なソリューションが必要です。これにアプローチする方法について誰か考えがありますか?

以下は、結果のテーブルが理想的にどのように見えるかです。

<tbody>
<tr><td>one</td></tr>
<tr><td>one</td></tr>
<tr><td>one</td></tr>
</tbody>
<tbody>
<tr><td>two</td></tr>
<tr><td>two</td></tr>
<tr><td>two</td></tr>
</tbody>
4

3 に答える 3

4

CSS とメディア クエリを使用して同じ外観を実現できます。

@media (max-width: 400px) { /* or whatever you want your mobile breakpoint to be */
    tr, td { float:left; width:100%; }
}

http://jsfiddle.net/nWPzp/

于 2013-10-29T19:30:59.420 に答える
1

表形式のデータを表示していない場合は、テーブルから離れて、代わりにリスト/div を使用することをお勧めします。表形式のデータを含む「レスポンシブ テーブル」の例を次に示します。

http://css-tricks.com/responsive-data-table-roundup/

指摘したように、それらの多くは CSS トリックです。

于 2013-10-29T19:48:51.080 に答える