Responsive Datentabelle html

Question

Ich habe eine 5-Spalte-Tabelle, die auf Handy, muss es jeden Header für jede Zeile wiederholen.

Ich habe kein Glück im Internet zu suchen (wahrscheinlich weil ich die falschen Wörter verwende, um danach zu suchen "wiederhole Tabellenköpfe für jede Zeile html") ... Ich habe eine Lösung gefunden, die ich schon verloren habe, aber es war so viel Code und zu kompliziert zu verstehen. Ich bin auf der Suche nach Rat/Hilfe, wie ich die Struktur aufbauen soll, oder muss ich vielleicht zwei völlig unterschiedliche Markups machen? Ich habe auch einige Plugins gesehen, aber ich darf sie nicht benutzen (ich bin auf einer Junior-Position und sie wollen, dass ich darüber nachdenke, wie ich Probleme selbst lösen kann).

Ich kann nicht viele Informationen geben .... als ich nicht wirklich weiß, wie es geht, aber ich denke, es muss eine Möglichkeit sein, die Header auf HTML für jede Zeile zu wiederholen ... Recht?

Irgendwelche Hilfe?

html:

<table class="myOrders col-xs-12" border="1"> 
     <thead> 
     <tr class="headers col-xs-12"> 
      <th class="col-sm-3 col-x-7">ORDER PLACED</th> 
      <th class="col-sm-2 col-x-7">ORDER ID</th> 
      <th class="col-sm-2 col-x-7">ORDER REF</th> 
      <th class="col-sm-3 col-x-7">ORDER AMOUNT</th> 
      <th class="col-sm-2 col-x-7">STATUS</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr class="order col-xs-12"> 
     <td class="datePlaced col-sm-3 col-x-7"><span>2016-05-12</span><span>15.13.56</span></td> 
      <td class="ident col-sm-2 col-x-7">AW 1234-165</td> 
      <td class="ref col-sm-2 col-x-7">SMRF123</td> 
      <td class="amount col-sm-3 col-x-7">£23.33</td> 
      <td class="status col-sm-2 col-x-7">Pending</td> 
    </tr> 
       <tr class="order col-xs-12"> 
     <td class="datePlaced col-sm-3 col-x-7"><span>2016-05-12</span><span>15.13.56</span></td> 
      <td class="ident col-sm-2 col-x-7">AW 1234-165</td> 
      <td class="ref col-sm-2 col-x-7">SMRF123</td> 
      <td class="amount col-sm-3 col-x-7">£23.33</td> 
      <td class="status col-sm-2 col-x-7">Pending</td> 
    </tr> 
       <tr class="order col-xs-12"> 
     <td class="datePlaced col-sm-3 col-x-7"><span>2016-05-12</span><span>15.13.56</span></td> 
      <td class="ident col-sm-2 col-x-7">AW 1234-165</td> 
      <td class="ref col-sm-2 col-x-7">SMRF123</td> 
      <td class="amount col-sm-3 col-x-7">£23.33</td> 
      <td class="status col-sm-2 col-x-7">Pending</td> 
    </tr> 
     </tbody> 
</table> 

css:

table td[class*="col-"], 
table th[class*="col-"] { 
    float: left; 
} 

Und das ist das gewünschte Verhalten:

https://jsfiddle.net/zzxac8ew/

Answer 1

Verwenden data-th mit TD

@media screen and (max-width: 640px) { 
 
    table#customDataTable caption { 
 
     background-image: none; 
 
    } 
 

 
    table#customDataTable thead { 
 
     display: none; 
 
    } 
 

 
    table#customDataTable tbody td { 
 
     display: block; 
 
     padding: .6rem; 
 
    } 
 

 
    table#customDataTable tbody tr td:first-child { 
 
     background: #666; 
 
     color: #fff; 
 
    } 
 

 
     table#customDataTable tbody tr td:first-child a { 
 
      color: #fff; 
 
     } 
 

 
     table#customDataTable tbody tr td:first-child:before { 
 
      color: rgb(225,181,71); 
 
     } 
 

 
    table#customDataTable tbody td:before { 
 
     content: attr(data-th); 
 
     font-weight: bold; 
 
     display: inline-block; 
 
     width: 10rem; 
 
    } 
 

 
    table#customDataTable tr th:last-child, table#customDataTable tr td:last-child { 
 
     max-width: 100% !important; 
 
     min-width: 100px !important; 
 
     width: 100% !important; 
 
    } 
 
}

 <table id="customDataTable" class="myOrders col-xs-12" border="1"> 
 
     <thead> 
 
     <tr class="headers col-xs-12"> 
 
      <th class="col-sm-3 col-x-7">ORDER PLACED</th> 
 
      <th class="col-sm-2 col-x-7">ORDER ID</th> 
 
      <th class="col-sm-2 col-x-7">ORDER REF</th> 
 
      <th class="col-sm-3 col-x-7">ORDER AMOUNT</th> 
 
      <th class="col-sm-2 col-x-7">STATUS</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr class="order col-xs-12"> 
 
\t  <td data-th="ORDER PLACED" class="datePlaced col-sm-3 col-x-7"><span>2016-05-12</span><span>15.13.56</span></td> 
 
      <td data-th="ORDER ID" class="ident col-sm-2 col-x-7">AW 1234-165</td> 
 
      <td data-th="ORDER REF" class="ref col-sm-2 col-x-7">SMRF123</td> 
 
      <td data-th="ORDER AMOUNT" class="amount col-sm-3 col-x-7">£23.33</td> 
 
      <td data-th="STATUS" class="status col-sm-2 col-x-7">Pending</td> 
 
\t </tr> \t 
 
      <tr class="order col-xs-12"> 
 
\t  <td data-th="ORDER PLACED" class="datePlaced col-sm-3 col-x-7"><span>2016-05-12</span><span>15.13.56</span></td> 
 
      <td data-th="ORDER ID" class="ident col-sm-2 col-x-7">AW 1234-165</td> 
 
      <td data-th="ORDER REF" class="ref col-sm-2 col-x-7">SMRF123</td> 
 
      <td data-th="ORDER AMOUNT" class="amount col-sm-3 col-x-7">£23.33</td> 
 
      <td data-th="STATUS" class="status col-sm-2 col-x-7">Pending</td> 
 
\t </tr> \t 
 
    <tr class="order col-xs-12"> 
 
\t  <td data-th="ORDER PLACED" class="datePlaced col-sm-3 col-x-7"><span>2016-05-12</span><span>15.13.56</span></td> 
 
      <td data-th="ORDER ID" class="ident col-sm-2 col-x-7">AW 1234-165</td> 
 
      <td data-th="ORDER REF" class="ref col-sm-2 col-x-7">SMRF123</td> 
 
      <td data-th="ORDER AMOUNT" class="amount col-sm-3 col-x-7">£23.33</td> 
 
      <td data-th="STATUS" class="status col-sm-2 col-x-7">Pending</td> 
 
\t </tr> \t 
 
     </tbody> 
 
</table>

https://jsfiddle.net/zzxac8ew/1/

Answer 2

nicht sicher, warum Sie das wiederholen wollen würde gleicher Header immer und immer wieder. Ich denke, ein stickiger Header wäre besser und es gibt jQuery-Plugins dafür.

Versuchen Sie dieses: http://mkoryak.github.io/floatThead/