解像度に応じてテーブルレイアウトを変更するにはどうすればよいですか？

Question

は、これはIE 10と11を対象としていて、私はまた、このレイアウトを持っている私は、デスクトップモニターをお持ちの場合

、私は私のテーブルが欲しいブートストラップ3を使用しています：

<table class="table table-responsive"> 
    <thead> 
     <tr> 
     <td>Header 1</td> 
     <td>Header 2</td> 
     <td>Header 3</td> 
     </tr> 
    </thead> 
    <tfoot></tfoot> 
    <tbody> 
     <tr> 
     <td>Data 1</td> 
     <td>Data 2</td> 
     <td>Data 3</td> 
     </tr> 
    </tbody> 
</table> 

オン

<table class="table table-responsive"> 
    <thead> 
     <tr> 
     <td>Header</td> 
     <td>Data</td> 
     </tr> 
    </thead> 
    <tfoot></tfoot> 
    <tbody> 
     <tr> 
     <td>Header 1</td> 
     <td>Data 1</td> 
     </tr> 
     <tr> 
     <td>Header 2</td> 
     <td>Data 2</td> 
     </tr> 
     <tr> 
     <td>Header 3</td> 
     <td>Data 3</td> 
     </tr> 
    </tbody> 
</table> 

一部または私はこれを行うことができますCSSがあります：携帯電話（または同様のデバイス）が、私はこのようなレイアウトをしたいのですが？または、これはjavascript（とcss）でのみ行うことができますか？

明確にするには、コードで解像度を検出し、2つのレイアウトの1つを表示する必要があります。

Answer 1

あなたは2つのテーブルを作成し、両者の間に切り替えるには、CSSメディアクエリを使用することができ、https://jsfiddle.net/5f3pbg8b/17/

.table.mobile { 
    display: none 
} 

.table.desktop { 
    display: inline 
} 

@media (max-width: 600px) { 
    .table.desktop { 
    display: none 
    } 
    .table.mobile { 
    display: inline 
    } 
}