我有一个5列表,在移动设备上,它需要为每一行重复每个标题。响应数据表html
我没有任何环顾四周的互联网(可能是因为我使用错误的词搜索它“重复每行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/
检查我的博客链接可能是你帮助 HTTP://tadhanilalji.blogspot 。在/ 2014/11 /小画面数据表-VI ew.html –