我正在尝试使用表获取以下数据。在移动 View 中,它无法正常工作:我正在尝试通过 Bootstrap 来实现它。 它也包括 colspan 和 rowspan。
HTML如下:
<div id="no-more-tables">
<table border="1" id="pricing" width="100%" class="table col-sm-12 table-bordered table-striped table-condensed cf">
<tr>
<th colspan="6" scope="col" style="background-color:#CD3E27; color:#FFFFFF;">Baner Packages - Per Month</th>
</tr>
<tr>
<td>The Mesh Premium</td>
<td>The Mesh Eco</td>
<td>The Mesh Ladies<br></td>
<td>The Mesh Impact</td>
<td>The Mesh Moonlighters</td>
<td>The Mesh 9-9</td>
</tr>
<tr>
<td rowspan="2">₹ 7,500/-</td>
<td rowspan="2">₹ 6,000/-</td>
<td rowspan="2">₹ 5,500/-</td>
<td rowspan="2">₹ 5,500/-</td>
<td rowspan="2">₹ 3,500/-</td>
<td>₹ 500/- Non-AC</td>
</tr>
<tr>
<td>₹ 750/- AC</td>
</tr>
<tr>
<td>Includes 24*7 AC</td>
<td>Non-AC</td>
<td>Non-AC</td>
<td>Non-AC</td>
<td>Non-AC</td>
<td>One Day Pass</td>
</tr>
</table>
<div>
CSS如下:
@media only screen and (max-width: 800px) {
/* Force table to not be like tables anymore */
#no-more-tables table,
#no-more-tables thead,
#no-more-tables tbody,
#no-more-tables th,
#no-more-tables td,
#no-more-tables tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
#no-more-tables thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
#no-more-tables tr { border: 1px solid #ccc; }
#no-more-tables td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
white-space: normal;
text-align:left;
}
#no-more-tables td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
text-align:left;
font-weight: bold;
}
/*
Label the data
*/
#no-more-tables td:before { content: attr(data-title); }
}
JS fiddle 链接如上:https://jsfiddle.net/anujoshi10/n0gL4y1g/ http://jsfiddle.net/anujoshi10/5t2syp13/
有人对此有解决方案吗?
最佳答案
对于 Bootstrap Responsive Table,我使用了这个技巧:Work Perfect for me。
访问链接并尝试遵循示例 http://elvery.net/demo/responsive-tables/
希望对您有所帮助! 谢谢
关于html - 带有 Bootstrap 的复杂响应表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32264227/