表行（tr）分隔和边框

Question

I have a styling issue with tables.

I need the following:

• responsive tables (on mobile some cells collapse)
• separation between table rows
• border between table rows
• can't assume anything about table row height

Something like this:

image:

for reference check this fiddle: 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> 

I need to add a border between the table rows, and it should display fine on mobile and desktop.

Any ideas?

Answer 1

I think this is what you are after

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>