带引导程序的复杂响应表

Question

我想用以下数据与表获得..在移动视图上，它不能正常工作：我试图通过引导实现它。它也包括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">&#8377; 7,500/-</td> 
    <td rowspan="2">&#8377; 6,000/-</td> 
    <td rowspan="2">&#8377; 5,500/-</td> 
    <td rowspan="2">&#8377; 5,500/-</td> 
    <td rowspan="2">&#8377; 3,500/-</td> 
    <td>&#8377; 500/- Non-AC</td> 
    </tr> 
    <tr> 
    <td>&#8377; 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拨弄链接如上：https://jsfiddle.net/anujoshi10/n0gL4y1g/ http://jsfiddle.net/anujoshi10/5t2syp13/

没有任何人对此有一个解决方案吗？

Answer 1

对于Bootstrap响应表我使用这个招：工作适合我。

访问链接，并尽量遵守例子http://elvery.net/demo/responsive-tables/

希望这有助于！ 谢谢