响应数据表html

Question

我有一个5列表，在移动设备上，它需要为每一行重复每个标题。

我没有任何环顾四周的互联网（可能是因为我使用错误的词搜索它“重复每行HTML表格标题”）...我找到了一个解决方案，我已经失去了，但是代码太多了，而且太复杂了。我正在寻找一些关于如何构建结构或者我需要做两个完全不同的标记的建议/帮助？我也看过一些插件，但我不允许使用它们（我处于初级职位，他们希望我自己考虑如何解决问题）。

我不能提供很多信息....因为我真的不知道该怎么做，但我想它一定是一种不会在每一行的html上重复标题的方法......对？

任何帮助？

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

这是所需的行为：

https://jsfiddle.net/zzxac8ew/

Answer 1

使用data-th与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

不知道为什么你要重复一遍又一遍的相同的标题。我认为一个粘性头文件会更好，并有jQuery插件。

试试这个：http://mkoryak.github.io/floatThead/