モバイル/タブレットビューのHTMLテーブルをブートストラップに転記

Question

Mobileのすべてのカラムを表示できるように、モバイル/タブレットでHTMLテーブルを転記することは可能ですか？下の画像は私が達成しようとしている例です。

Answer 1

htmlのtableタグにtable-responsiveというクラスを追加してみてください。 テーブルを応答するためのブートストラップクラスです。

Answer 2

これですべてが必要です。あなたの必要性にぴったりです、あなたはそれを愛するでしょう。

チェックこのリンク - fooのテーブルライブラリ/プラグイン：https://css-tricks.com/footable-a-jquery-plugin-for-responsive-data-tables/

Answer 3

このリンクはあなたが必要とするのに役立ちます

TABLES RESPONSIVES WIDTH 100%

index.htmlを

<table> 
    <thead> 
     <tr> 
      <th>Code</th> 
      <th>Company</th> 
      <th class="numeric">Price</th> 
      <th class="numeric">Change</th> 
      <th class="numeric">Change %</th> 
      <th class="numeric">Open</th> 
      <th class="numeric">High</th> 
      <th class="numeric">Low</th> 
      <th class="numeric">Volume</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>AAC</td> 
      <td>AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td> 
      <td class="numeric">$1.38</td> 
      <td class="numeric">-0.01</td> 
      <td class="numeric">-0.36%</td> 
      <td class="numeric">$1.39</td> 
      <td class="numeric">$1.39</td> 
      <td class="numeric">$1.38</td> 
      <td class="numeric">9,395</td> 
     </tr> 
    </tbody> 
</table> 

css.css

@media only screen and (max-width: 800px) { 
    #unseen table td:nth-child(2), 
    #unseen table th:nth-child(2) {display: none;} 
} 

@media only screen and (max-width: 640px) { 
    #unseen table td:nth-child(4), 
    #unseen table th:nth-child(4), 
    #unseen table td:nth-child(7), 
    #unseen table th:nth-child(7), 
    #unseen table td:nth-child(8), 
    #unseen table th:nth-child(8){display: none;} 
}