HTML-Tabelle in Mobile-/Tablet-Ansicht im Bootstrap transponieren

Question

Ist es möglich, eine HTML-Tabelle in Mobile/Tablet zu transponieren, damit wir auch alle Spalten in Mobile anzeigen können. Unterhalb des Bildes ist das Beispiel, was ich versuche zu erreichen.

Answer 1

Versuchen Sie, eine Klasse table-responsive zum Tag der Tabelle Ihres HTML hinzuzufügen. Es ist eine Bootstrap-Klasse, um Tabellen reaktionsfähig zu machen.

Answer 2

Das ist alles was Sie brauchen. Es ist großartig für Ihre Bedürfnisse, Sie werden es lieben.

prüfen Link - foo Tabelle Bibliothek/Plugin: https://css-tricks.com/footable-a-jquery-plugin-for-responsive-data-tables/

Answer 3

Dieser Link führt Sie

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

Hilfe benötigen

@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;} 
}