表格边框没有显示出来

Question

我正在尝试设置表格的样式，并且边框没有出现。这从来没有发生过我，所以我不知道该怎么做。

这里是我的表：

<table class="table"> 
    <thead> 
    <tr> 
     <th>Dessert (100g serving)</th> 
     <th>Calories</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>Dessert (100g serving)</td> 
     <td>Calories</td> 
    </tr> 
    </tbody> 
</table> 

这是我的少：

@dark-text: rgba(0,0,0,0.87); 
@dark-text-secondary: rgba(0,0,0,0.54); 
@dark-text-disabled: rgba(0,0,0,0.26); 

.table { 
    z-index: 10; 

    thead { 
     tr { 
      border-bottom: 3px solid @dark-text-disabled; 
      z-index: 10; 

      th { 
       color: @dark-text-secondary; 
       z-index: 10; 
      } 
     } 
    } 

    tbody { 
     tr { 
      border-bottom: 3px solid @dark-text-disabled; 
      z-index: 10; 

      td { 
       z-index: 10; 
      } 
     } 
    } 
} 

http://codepen.io/anon/pen/JdOaVO

Answer 1

无论是移动border-bottom规则的th和td标签或使用collapsing border model（border-collapse: collapse;）为.table

.table { 
    border-collapse: collapse; 
} 

http://codepen.io/anon/pen/BNmOgg