响应表中缺少1px垂直/水平线

时间：2016-09-01 05:47:29

标签： html css css3 media-queries responsive

我正在使用响应表，其中1px vertical＆amp;缺少水平线。

这是我的CSS＆amp; 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。

2 个答案:

答案 0 :(得分：1)

Just add border into table and add border-collapse: collapse to set table borders are collapsed into a single border.

.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 :(得分：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>
.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}}

相关问题
最新问题