表格（tr）分離和邊框

Question

我有一個表格樣式問題。

我需要以下條件：

• 響應表（在移動某些細胞崩潰）
• 錶行之間的分離
• 錶行之間的邊界
• 不能承擔有關錶行的高度什麼

類似這樣的：

圖像：

參考檢查此琴：http://jsfiddle.net/m15rccmr/

table{ 
 
    width: 100%; 
 
    border-collapse: separate; 
 
    border-spacing: 0 30px; 
 
} 
 
tr{ 
 
    border-bottom: 1px solid red; 
 
} 
 

 
.mobile-fold{ 
 
    display:block; 
 
} 
 
@media (min-width: 800px){ 
 
    .mobile-fold{ 
 
     display:table-cell; 
 
    } 
 
}

<table> 
 
    <tbody> 
 
      <tr> 
 
      <td>first</td> 
 
      <td class="mobile-fold">second</td> 
 
      <td class="mobile-fold">third</td> 
 
     </tr> 
 
     
 
     <tr> 
 
      <td>first</td> 
 
      <td class="mobile-fold">second</td> 
 
      <td class="mobile-fold">third</td> 
 
     </tr> 
 
     
 
     <tr> 
 
      <td>first</td> 
 
      <td class="mobile-fold">second</td> 
 
      <td class="mobile-fold">third</td> 
 
     </tr> 
 
    </tbody> 
 
</table>

我需要添加錶行之間的邊界，它應該顯示在移動和桌面罰款。

有什麼想法嗎？，謝謝！

Answer 1

我想這是你所追求的

JSfiddle Demo

table { 
 
    width: 100%; 
 
    border-collapse: separate; 
 
    border-spacing: 0 30px; 
 
} 
 
td { 
 
    border-bottom: 1px solid red; 
 
} 
 
td:nth-of-type(2) { 
 
    border: none; 
 
} 
 
.mobile-fold { 
 
    display: block; 
 
} 
 
@media (min-width: 800px) { 
 
    .mobile-fold { 
 
    display: table-cell; 
 
    } 
 
    td:nth-of-type(2) { 
 
    border-bottom: 1px solid red; 
 
    } 
 
}

<table> 
 
    <tbody> 
 
    <tr> 
 
     <td>first</td> 
 
     <td class="mobile-fold">second</td> 
 
     <td class="mobile-fold">third</td> 
 
    </tr> 
 
    <tr> 
 
     <td>first</td> 
 
     <td class="mobile-fold">second</td> 
 
     <td class="mobile-fold">third</td> 
 
    </tr> 
 
    <tr> 
 
     <td>first</td> 
 
     <td class="mobile-fold">second</td> 
 
     <td class="mobile-fold">third</td> 
 
    </tr> 
 
    </tbody> 
 
</table>