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

【问题标题】：1px vertical/horizontal lines missing in Responsive Table响应表中缺少 1px 垂直/水平线
【发布时间】：2016-09-01 22:16:39
【问题描述】：

我正在使用缺少 1px 垂直和水平线的响应表。

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

【问题讨论】：

我在小提琴中看到的唯一边框属性是边框：0。此外，根据小提琴编辑器语法荧光笔，您的 HTML 中存在结构错误；也许也解决这些问题。哦，最好在问题中发布代码，而不是在小提琴中，但你已经知道了。

标签： html css media-queries responsive

【解决方案1】：

只需在表格中添加边框并添加border-collapse: collapse即可设置表格边框折叠为单个边框。

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

【讨论】：

@YashveerArya 如果它工作正常，您可以通过单击复选标记来接受这个答案吗？这样，该问题将不再出现在未解决问题列表中。

【解决方案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>

【讨论】：