Wie werden Tabellenzeilen in Spalten entsprechend der Bildschirmgröße geändert?

Question

Ich möchte einen Tisch unterschiedlich machen, je nach Bildschirmgröße:

• Wenn der Bildschirm klein ist (< col-md-*) sollte es die Daten auf2 Spalten normal angezeigt.

---

• Wenn der Bildschirm groß ist (col-md-* und höher), muss er die Daten in 4 Spalten zeigen.

---

Hier ist ein Fiddle des folgenden Codes:

HTML

<div class="row"> 
    <table class="table"> 
    <thead> 
     <tr> 
     <th>Firstname</th> 
     <th>Lastname</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="i in items"> 
     <td>{{i.firstname}}</td> 
     <td>{{i.lastname}}</td> 
     </tr> 
    </tbody> 
    </table> 
</div> 

Angular Objekt zu machen

$scope.items = [{ 
    "firstname": "John", "lastname": "Rambo" 
    }, { 
    "firstname": "Conor", "lastname": "McCloud" 
    }, { 
    "firstname": "Bruce", "lastname": "Wayne" 
    }, { 
    "firstname": "Peter", "lastname": "Parker" 
    }, { 
    "firstname": "Forrest", "lastname": "Gump" 
    }, { 
    "firstname": "Patience", "lastname": "Philipps" 
    }, { 
    "firstname": "Steve", "lastname": "Jobs" 
    }, { 
    "firstname": "Harry", "lastname": "Potter" 
    } 
]; 

---

Hinweise

1. Ich möchte vermeiden Code duplizieren dies zu tun.

2. Ich habe mehrere Dinge ausprobiert, und der einfachste Weg, den ich gefunden habe, ist, die Daten in 2 Teile zu schneiden und eine Tabelle für jeden zu machen. Ich mag das nicht, es ist zu komplex, aber hier ist ein Fiddle for this solution.

3. brauche ich nicht th (Vorname, Nachname), entfernen Sie diese, wenn es einfacher ist.

Answer 1

Versuchen Sie es.

Ich hoffe, das wird Ihnen helfen.

.table{ 
 
    margin-bottom: 0px!important; 
 
} 
 
@media (max-width: 767px){ 
 
    .table tr th, .table tr td{ 
 
    width: 50%; 
 
    } 
 
    .on-small thead{ 
 
    display: none; 
 
    } 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="container"> 
 
\t <div class="row"> 
 
\t \t <div class="col-sm-6"> 
 
\t \t \t <table class="table table-striped"> 
 
     <thead> 
 
      <tr> 
 
      <th>First Name</th> 
 
      <th>Last Name</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
      <td>John</td> 
 
      <td>Rambo</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Conor</td> 
 
      <td>McCloud</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Bruce</td> 
 
      <td>Wayne</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Forrest</td> 
 
      <td>Gump</td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
\t \t </div> 
 
    <div class="col-sm-6"> 
 
     <table class="table table-striped on-small"> 
 
     <thead> 
 
      <tr> 
 
      <th>First Name</th> 
 
      <th>Last Name</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
      <td>Patience</td> 
 
      <td>Philipps</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Steve</td> 
 
      <td>Jobs</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Peter</td> 
 
      <td>Parker</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Harry</td> 
 
      <td>Potter</td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
    </div> 
 
\t </div> 
 
</div>