响应式数据表格html [英] Responsive data table html
本文介绍了响应式数据表格html的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个5列的表格，在移动设备上，它需要为每一行重复每个标题。
我没有任何运气环顾网络（可能是因为我使用错误的词搜索它为每行html重复表格标题）...我发现了一种解决方案，我已经失去了它，但代码太多，而且太复杂，难以理解。我正在寻找一些关于如何构建结构或者我需要做两个完全不同的标记的建议/帮助？我也看过一些插件，但我不允许使用它们（我处于初级职位，他们希望我自己考虑如何解决问题）。
<我不能提供很多信息......因为我真的不知道该怎么做，但我想这肯定是一种不会在每一行的html上重复标题的方式......对吧？
任何帮助？
html：
< table class =myOrders col-xs-12border =1>
< thead>
< tr class =标题col-xs-12>
< / 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>待处理< / 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>待处理< / 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>待处理< / td>
< / tr>
< / tbody>
< / table>
css：
table td [class * =col-]，
table th [class * =col-] {
float：left;
}
这是所需的行为：
https：// jsfiddle .net / zzxac8ew /
解决方案
使用 data-th with TD
@media screen和（max-width：640px）{table＃customDataTable caption {background-image：none; } table＃customDataTable thead {display：none; } table＃customDataTable tbody td {display：block;填充：.6rem; } table＃customDataTable tbody tr td：first-child {background：＃666;颜色：#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;显示：inline-block;宽度：10rem; } table＃customDataTable tr th：last-child，table＃customDataTable tr td：last-child {max-width：100％！important; min-width：100px！important;宽度：100％！重要; }}
< table id =customDataTableclass = myOrders col-xs-12border =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 data-th =ORDER PLACEDclass =datePlaced col-sm-3 col-x-7>< span> 2016-05-12< / span>< span> 15.13.56<跨度>< / TD> < td data-th =ORDER IDclass =ident col-sm-2 col-x-7> AW 1234-165< / td> < td data-th =ORDER REFclass =ref col-sm-2 col-x-7> SMRF123< / td> < td data-th =ORDER AMOUNTclass =amount col-sm-3 col-x-7>£23.33< / td> < td data-th =STATUSclass =status col-sm-2 col-x-7> Pending< / td> < / TR> < tr class =order col-xs-12> < td data-th =ORDER PLACEDclass =datePlaced col-sm-3 col-x-7>< span> 2016-05-12< / span>< span> 15.13.56<跨度>< / TD> < td data-th =ORDER IDclass =ident col-sm-2 col-x-7> AW 1234-165< / td> < td data-th =ORDER REFclass =ref col-sm-2 col-x-7> SMRF123< / td> < td data-th =ORDER AMOUNTclass =amount col-sm-3 col-x-7>£23.33< / td> < td data-th =STATUSclass =status col-sm-2 col-x-7> Pending< / td> < / TR> < tr class =order col-xs-12> < td data-th =ORDER PLACEDclass =datePlaced col-sm-3 col-x-7>< span> 2016-05-12< / span>< span> 15.13.56<跨度>< / TD> < td data-th =ORDER IDclass =ident col-sm-2 col-x-7> AW 1234-165< / td> < td data-th =ORDER REFclass =ref col-sm-2 col-x-7> SMRF123< / td> < td data-th =ORDER AMOUNTclass =amount col-sm-3 col-x-7>£23.33< / td> < td data-th =STATUSclass =status col-sm-2 col-x-7> Pending< / td> < / TR> < / tbody>< / table>
$ b
https://jsfiddle.net/zzxac8ew/1/
I have a 5 column table, that on mobile, it needs to repeat each header for each row.
I am not having any luck looking around internet (probably because I am using the wrong words to search for it "repeat table headers for each row html")... I found one solution, which I have lost already, but it was so much code, and too complicated to understand. I am looking for some advice/help about how should I build the structure or maybe I need to do two markups completely different? I have also seen some plugins, but I am not allowed to use them (I am on a junior position and they want me to think about how to solve problems by myself).
I can't give a lot of information.... as I don't really know how to do it, but I guess it must be a way for no repeating the headers on html for every row... right?
Any help?
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;
}
And this is the desired behaviour:
https://jsfiddle.net/zzxac8ew/
解决方案
Use data-th with 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">
<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>
</tr>
<tr class="order col-xs-12">
<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>
</tr>
<tr class="order col-xs-12">
<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>
</tr>
</tbody>
</table>
https://jsfiddle.net/zzxac8ew/1/
这篇关于响应式数据表格html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
