クロスブラウザ対応の折りたたみテーブル

これについてオンラインではたくさんあるようですが、それは信じられないほど混乱しているので、私は決定的な答えを得ようとします。クロスブラウザ対応の折りたたみテーブル

私はテーブルがあります。たとえば、2列と2行です。

1 | 2

3 | 4

ビューポートが必要なときに行に崩壊したい。

<table border=0 cellpadding=0 cellspacing=0 width="100%" class="resptable"> 
    <tr> 
     <td>Text 1</td> 
    <td>Text 2</td> 
    </tr> 
    <tr> 
     <td>Text 3</td> 
    <td>Text 4</td> 
    </tr> 
</table>

を次のように私のコードは、次のように積層されたバージョンのCSSです。

.resptable td {display:block;width:100% !important;padding-right:20px;}

これはFFとChromeではOKですが、SafariやIEでは問題ありません。

奇妙なことに（私に）、TDに付属していない同じコードがSafariで動作します（まだIEにはありません）。

すべてのサイトが応答しなければならない世界では、まだブラウザとデバイスのクロス問題が1000件あると考えています。

誰もがこの単純なタスクのための明確なクロスブラウザ方式を手に入れましたか？

出典

2017-03-03 RobertyBob

テーブルを使用しないでください。テーブルは反応するために多くの努力を払っています。グリッドシステム、またはFlex CSSを使用してみてください。 – Staveven

@Stavevenありがとうございます - 私はそれが完全に論理的な提案だと確信していますが、私は喜んで賛成論に同意する傾向がありますが、私はフレックスなどをチェックアウトする必要がありますように将来のための： – RobertyBob

私は、コマンド。私は別のテーブルを追加して反応します。 – Staveven

これを行う最も簡単な方法は、TD要素の幅をピクセル単位で指定することです。私はそれに500pxの幅を与えました。これは、あなたが持っている幅に応じてスクリーンが十分に大きければ、Viewportと共に機能し、折りたたまれません。小さければ1行に1つに崩壊します。このコードをフルモードで表示すると表示されます。

.resptable td {display:inline-block; width: 500px; !important;padding-right:20px;}

<table border=0 cellpadding=0 cellspacing=0 width="100%" class="resptable"> 
 
    <tr> 
 
     <td>Text 1</td> 
 
    <td>Text 2</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Text 3</td> 
 
    <td>Text 4</td> 
 
    </tr> 
 
</table>

あなたがテーブルを使用しない場合は、これを実現する方法はたくさんあります。この場合、テーブルを使用するのが最良の選択肢ではないかもしれません。代わりに、テーブルのように動作するシンプルなフォーマットを作成しましたが、それは反応的です。 *フルモードで表示し、画面が収縮するのを見るために縮小します。

.parent-wrapper { 
 
    height:100%; 
 
    width:100%; 
 
    
 
} 
 
.parent { 
 
    flex-wrap: flex; 
 
    margin:-10px 0 0 -10px; 
 
} 
 
.child { 
 
    display: inline-block; 
 
    margin:10px 0 0 10px; 
 
    flex-grow: 1; 
 
    height:100px; 
 
    width: 500px; 
 
}

<div class="parent-wrapper"> 
 
     
 
     <div class="parent"> 
 
      <div class="child">Text1</div> 
 
      <div class="child">Text2</div> 
 
      </div>   
 
     </div>  
 
     
 
     <div class="parent"> 
 
      <div class="child">Text3</div> 
 
      <div class="child">Text4</div> 
 
      </div>   
 
     </div> 
 
       
 
    </div>

出典

2017-03-03 18:11:54 Staveven

私はこれがテーブルの便利な代替手段を提供しているので、これをupvotedしました - 今後さらに調査する – RobertyBob

他の場所で示唆したように、DOCTYPE宣言はキーです。

私はdoctypeを持たないコードで問題があると思っていましたが、実際には重要な宣言のタイプのようです。

これにより

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

のようなものは、元のコードが正しく機能するよう改正され、それが

<!DOCTYPE HTML>

はなくでなければならないようです。 @Panglossと@Stavevenのおかげで、ソースがこの結論に導かれました。

出典

2017-03-04 11:40:06 RobertyBob

クロスブラウザ対応の折りたたみテーブル

答えて

関連する問題