Question

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

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

我无法提供大量信息....因为我不知道该怎么做，但我想它必须是一种不在每行重复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/

响应数据表html

0 个答案: