1px vertikale/horizontale Linien fehlen in Responsive Tabelle

Ich verwende eine Responsive Tabelle, wo 1px vertikale & horizontale Linien fehlt.1px vertikale/horizontale Linien fehlen in Responsive Tabelle

Hier ist mein CSS & HTML:

.table-responsive { 
 
    overflow-x: auto; 
 
    min-height: .01% 
 
} 
 
.table-responsive > .table { 
 
    margin-bottom: 0 
 
} 
 
.table-responsive > .table > thead > tr > th, 
 
.table-responsive > .table > tbody > tr > th, 
 
.table-responsive > .table > tfoot > tr > th, 
 
.table-responsive > .table > thead > tr > td, 
 
.table-responsive > .table > tbody > tr > td, 
 
.table-responsive > .table > tfoot > tr > td { 
 
    white-space: nowrap 
 
} 
 
.table-responsive > .table-bordered { 
 
    border: 0 
 
} 
 
.table-responsive > .table-bordered > thead > tr > th:first-child, 
 
.table-responsive > .table-bordered > tbody > tr > th:first-child, 
 
.table-responsive > .table-bordered > tfoot > tr > th:first-child, 
 
.table-responsive > .table-bordered > thead > tr > td:first-child, 
 
.table-responsive > .table-bordered > tbody > tr > td:first-child, 
 
.table-responsive > .table-bordered > tfoot > tr > td:first-child { 
 
    border-left: 0 
 
} 
 
.table-responsive > .table-bordered > thead > tr > th:last-child, 
 
.table-responsive > .table-bordered > tbody > tr > th:last-child, 
 
.table-responsive > .table-bordered > tfoot > tr > th:last-child, 
 
.table-responsive > .table-bordered > thead > tr > td:last-child, 
 
.table-responsive > .table-bordered > tbody > tr > td:last-child, 
 
.table-responsive > .table-bordered > tfoot > tr > td:last-child { 
 
    border-right: 0 
 
} 
 
.table-responsive > .table-bordered > tbody > tr:last-child > th, 
 
.table-responsive > .table-bordered > tfoot > tr:last-child > th, 
 
.table-responsive > .table-bordered > tbody > tr:last-child > td, 
 
.table-responsive > .table-bordered > tfoot > tr:last-child > td { 
 
    border-bottom: 0 
 
}

<div class="table-responsive"> 
 
    <table class="table table-bordered text-center"> 
 
     <thead> 
 
     <tr> 
 
      <th><strong>Today’s Recharge Coupons</strong></th> 
 
      <th><strong>Details</strong></th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr> 
 
      <td>Recharge & Postpaid Bill Payments</td> 
 
      <td>Upto 400% Cashback</td> 
 
     </tr> 
 
     <tr> 
 
      <td>DTH Recharge</td> 
 
      <td>20% Cashback</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Mobile Prepaid Recharges</td> 
 
      <td>75% Cashback</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Electricity/Gas/Landline Bill Payments</td> 
 
      <td>15% cashback</td> 
 
     </tr>   
 
     <tr> 
 
      <td>Recharges & Bill Payments </td> 
 
      <td>Get 3% Cashback for All Users</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
</div>

Ich mag dieses screenshot machen wollen.

Quelle

2016-09-01 Yashveer Arya

Die einzige Grenze Eigenschaften ich in der Geige zu sehen sind Grenze: 0 gewonnen. Laut dem Syntax-Highlighter der Fiddle-Editor-Datei haben Sie strukturelle Fehler in Ihrem HTML-Code. repariere vielleicht auch diese. Oh, und es ist besser, den Code in der Frage zu posten, als in einer Geige, aber das wusstest du schon. –

.table-responsive { 
 
    overflow-x: auto; 
 
    min-height: .01% 
 
} 
 
.table-responsive > .table { 
 
    margin-bottom: 0; 
 
    
 
} 
 
.table-responsive > .table > thead > tr > th, 
 
.table-responsive > .table > tbody > tr > th, 
 
.table-responsive > .table > tfoot > tr > th, 
 
.table-responsive > .table > thead > tr > td, 
 
.table-responsive > .table > tbody > tr > td, 
 
.table-responsive > .table > tfoot > tr > td { 
 
    white-space: nowrap 
 
} 
 
.table-responsive > .table-bordered { 
 
    border: 1px solid #ccc; 
 
    border-collapse: collapse; 
 
} 
 
.table-responsive tr, 
 
.table-responsive td, 
 
.table-responsive th{ 
 
    border: 1px solid #ccc; 
 
    padding:5px 
 
}

<div class="table-responsive"> 
 
    <table class="table table-bordered text-center"> 
 
     <thead> 
 
     <tr> 
 
      <th><strong>Today’s Recharge Coupons</strong></th> 
 
      <th><strong>Details</strong></th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr> 
 
      <td>Recharge & Postpaid Bill Payments</td> 
 
      <td>Upto 400% Cashback</td> 
 
     </tr> 
 
     <tr> 
 
      <td>DTH Recharge</td> 
 
      <td>20% Cashback</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Mobile Prepaid Recharges</td> 
 
      <td>75% Cashback</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Electricity/Gas/Landline Bill Payments</td> 
 
      <td>15% cashback</td> 
 
     </tr>   
 
     <tr> 
 
      <td>Recharges & Bill Payments </td> 
 
      <td>Get 3% Cashback for All Users</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
</div>

.table-responsive { 
 
    overflow-x: auto; 
 
    min-height: .01% 
 
} 
 
.table-responsive > .table { 
 
    margin-bottom: 0; 
 
    
 
} 
 
.table-responsive > .table > thead > tr > th, 
 
.table-responsive > .table > tbody > tr > th, 
 
.table-responsive > .table > tfoot > tr > th, 
 
.table-responsive > .table > thead > tr > td, 
 
.table-responsive > .table > tbody > tr > td, 
 
.table-responsive > .table > tfoot > tr > td { 
 
    white-space: nowrap 
 
} 
 
.table-responsive > .table-bordered { 
 
    border: 1px solid #ccc; 
 
    border-collapse: collapse; 
 
} 
 
.table-responsive tr, 
 
.table-responsive td, 
 
.table-responsive th{ 
 
    border: 1px solid #ccc; 
 
    padding:5px 
 
}

<div class="table-responsive"> 
 
    <table class="table table-bordered text-center"> 
 
     <thead> 
 
     <tr> 
 
      <th><strong>Today’s Recharge Coupons</strong></th> 
 
      <th><strong>Details</strong></th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr> 
 
      <td>Recharge & Postpaid Bill Payments</td> 
 
      <td>Upto 400% Cashback</td> 
 
     </tr> 
 
     <tr> 
 
      <td>DTH Recharge</td> 
 
      <td>20% Cashback</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Mobile Prepaid Recharges</td> 
 
      <td>75% Cashback</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Electricity/Gas/Landline Bill Payments</td> 
 
      <td>15% cashback</td> 
 
     </tr>   
 
     <tr> 
 
      <td>Recharges & Bill Payments </td> 
 
      <td>Get 3% Cashback for All Users</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
</div>

Quelle

2016-09-01 14:16:39

Fügen Sie einfach einen Rahmen in die Tabelle ein und fügen Sie border-collapse: collapse hinzu, um festzulegen, dass die Tabellenrahmen in einem einzigen Rahmen zusammengefasst werden.

.table-responsive { 
 
    overflow-x: auto; 
 
    min-height: .01% 
 
} 
 
.table-responsive > .table { 
 
    margin-bottom: 0; 
 
    
 
} 
 
.table-responsive > .table > thead > tr > th, 
 
.table-responsive > .table > tbody > tr > th, 
 
.table-responsive > .table > tfoot > tr > th, 
 
.table-responsive > .table > thead > tr > td, 
 
.table-responsive > .table > tbody > tr > td, 
 
.table-responsive > .table > tfoot > tr > td { 
 
    white-space: nowrap 
 
} 
 
.table-responsive > .table-bordered { 
 
    border: 1px solid #ccc; 
 
    border-collapse: collapse; 
 
} 
 
.table-responsive tr, 
 
.table-responsive td, 
 
.table-responsive th{ 
 
    border: 1px solid #ccc; 
 
    padding:5px 
 
}

<div class="table-responsive"> 
 
    <table class="table table-bordered text-center"> 
 
     <thead> 
 
     <tr> 
 
      <th><strong>Today’s Recharge Coupons</strong></th> 
 
      <th><strong>Details</strong></th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr> 
 
      <td>Recharge & Postpaid Bill Payments</td> 
 
      <td>Upto 400% Cashback</td> 
 
     </tr> 
 
     <tr> 
 
      <td>DTH Recharge</td> 
 
      <td>20% Cashback</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Mobile Prepaid Recharges</td> 
 
      <td>75% Cashback</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Electricity/Gas/Landline Bill Payments</td> 
 
      <td>15% cashback</td> 
 
     </tr>   
 
     <tr> 
 
      <td>Recharges & Bill Payments </td> 
 
      <td>Get 3% Cashback for All Users</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
</div>

Quelle

2016-09-01 06:07:07

Danke ... Jetzt funktioniert es gut :-) –

@YashveerArya Wenn es funktioniert, können Sie diese Antwort akzeptieren, indem Sie auf das Häkchen klicken? Auf diese Weise wird die Frage nicht mehr in der Liste der ungelösten Probleme angezeigt. –

1px vertikale/horizontale Linien fehlen in Responsive Tabelle

Antwort

Verwandte Themen