响应中缺少 1 像素 vertical/horizontal 行 Table

Question

我正在使用响应式 Table，其中缺少 1 像素的垂直和水平线。

这是我的 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>

我想做成这样screenshot。

Answer 1

只需将边框添加到 table 并添加 border-collapse: collapse 即可设置 table 边框折叠成单个边框。

.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>

Answer 2

.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>

响应中缺少 1 像素 vertical/horizontal 行 Table

1px vertical/horizontal lines missing in Responsive Table

html

css

media-queries

responsive