Tablas con div, evitar el doble borde en celdas

Cuando tienes que mostrar datos tabulados lo normal es elegir maquetarlas con tablas pero éstas no se comportan bien en dispositivos móviles de pantalla pequeña. hay diversas soluciones pero ninguna me convence cuando se trata de pantallas de 320 píxeles.
Me puse manos a la obra a hacer la tabla con divs y al principio me salía un borde dos veces pero eso con css lo pude solucionar.




<div class="table"> <div class="rowtable"> <div class="cell">Date</div> <div class="cell">Sun, 21 Feb 2016 08:25:29 GMT</div> <div class="cell">data</div> </div> <div class="rowtable"> <div class="cell">Date</div> <div class="cell">Sun, 21 Feb 2016 08:25:29 GMT</div> <div class="cell">data</div> </div> <div class="rowtable"> <div class="cell">Date</div> <div class="cell">Sun, 21 Feb 2016 08:25:29 GMT</div> <div class="cell">data</div> </div> </div> Este sería el css, incluido el responsive que evita el doble borde en algunas celdas de la tabla: /* Tables */ .table { display: table; } .rowtable { display: table-row; } .rowtable:nth-child(odd){ background: #f9f9f9; } .cell:nth-child(odd){ width:25%; } .cell{ border: 1px solid #ddd; border-left: none; border-bottom:none; padding: 8px; vertical-align: top; display: table-cell; } .cell:first-child { border-left: 1px solid #ddd; } .rowtable:last-child .cell{ border-bottom: 1px solid #ddd; } /* End Tables */ /* Media Queries */ @media screen and (max-width: 480px) { .cell{ width:100%; display:inline-block; border-left: 1px solid #ddd; } .cell:nth-child(odd){ width:100%; } } } /* End Media Queries */ Lo he comprobado con dos y tres columnas y no he visto ningún problema.