Сложная отзывчивая таблица с bootstrap

Question

Я пытаюсь получить со следующими данными со столом .. на мобильном представлении она не работает отлично: я пытаюсь добиться ее, чтобы достичь ее через бутстрап. Он включает в себя колспан и ряды.

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 я использую этот трюк: работа Идеальна для меня.

Посетите Link и попытаться следовать Примеры http://elvery.net/demo/responsive-tables/

Надежда Это помогает! Спасибо