body { width: 100%; min-height: 100vh; padding-bottom: 150px; background-image: linear-gradient(45deg, #F7CAC9 15%, #91A8D0 85%); } .h1 { margin: 2em; font-family: 'Dancing Script', cursive; color: rgba(white, .85); } .wrap { display: flex; justify-content: center; align-items: center; } .inner { display: block; transform-style: preserve-3d; perspective: 800px; } @media (min-width: 769px) { .table { display: flex; // tr { display: flex; flex-direction: column; } th { border-top: 0; border-bottom: 0 !important; } td { border-top: 0; } } .table_body { display: flex; } } .table_head { background-color: rgba(black,.1); } .table_body { background-color: rgba(white,.35); }
<h1 class="h1 font-weight-bold text-xs-center text-capitalize">responsive table</h1> <div class="wrap"> <div class="inner"> <table class="table"> <thead class="table_head"> <tr> <th>titleA</th> <th>titleB</th> <th>titleC</th> <th>titleD</th> </tr> </thead> <tbody class="table_body"> <tr> <td>a01</td> <td>a02</td> <td>a03</td> <td>a04</td> </tr> <tr> <td>b01</td> <td>b02</td> <td>b03</td> <td>b04</td> </tr> <tr> <td>c01</td> <td>c02</td> <td>c03</td> <td>c04</td> </tr> <tr> <td>d01</td> <td>d02</td> <td>d03</td> <td>d04</td> </tr> </tbody> </table> </div> </div>