Wie man eine große Tabelle anspricht

Question

Meine Tabellen werden auf dem Desktop angezeigt, aber sobald ich versuche, die mobile Version anzuzeigen, ist meine Tabelle für den Bildschirm des mobilen Geräts zu breit. Ich verwende ein responsives Layout. Wie kann ich diese Tabelle in der mobilen angezeigt fein werden Dies ist mein Code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<div class="row clearfix"> 
 
    <div class="col-xs-12"> 
 
     <div class="card"> 
 
      <div class="body"> 
 
       <div class="table-responsive"> 
 
        <table id="myTable" class="table table-bordered table-striped table-hover js-basic-example dataTable"> 
 
         <thead> 
 
          <tr> 
 
           <th>Name</th> 
 
           <th>Position</th> 
 
           <th>Office</th> 
 
           <th>Age</th> 
 
           <th>Start date</th> 
 
           <th>Salary</th> 
 
          </tr> 
 
         </thead> 
 
         <tr> 
 
          <th>Name</th> 
 
          <th>Position</th> 
 
          <th>Office</th> 
 
          <th>Age</th> 
 
          <th>Start date</th> 
 
          <th>Salary</th> 
 
         </tr> 
 
        </table> 
 

 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    </div>

Answer 1

nicht Versuchen fisics zu kämpfen, meine Freunde. Vielleicht können Sie die weniger wichtigen Spalten mit Media-Abfragen ausblenden, zeigen Sie 3 anstelle von 6

Answer 2

Eine andere Option könnte horizontales Scrollen für die Tabelle durch Hinzufügen von overflow-x: auto; zum Stylesheet für das Eltern-Div.

div.table-responsive { 
    overflow-x:auto; 
}