<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <table align="center" style="width:50%"> <colgroup> <col width="50%" /> </colgroup> <!-- Group 1--> <td> <table align="center"> <tbody> <tr> <td style="text-align: center;"><strong>Title 1</strong></td> </tr> <tr> <td style="text-align: center;">Text 1</td> </tr> </tbody> </table> </td> <!-- Group 2--> <td> <table align="center"> <tbody> <tr> <td style="text-align: center;"><strong>Title 2</strong></td> </tr> <tr> <td style="text-align: center;">Text 2</td> </tr> </tbody> </table> </td> </table> <hr /> <table align="center" style="width:100%"> <colgroup> <col width="35%" /> </colgroup> <!-- Group 1--> <td> <table align="center"> <tbody> <tr> <td style="text-align: center;"><strong>Title 1</strong></td> </tr> <tr> <td style="text-align: center;">Text 1</td> </tr> </tbody> </table> </td> <!-- Group 2--> <td> <table align="center"> <tbody> <tr> <td style="text-align: center;"><strong>Title 2</strong></td> </tr> <tr> <td style="text-align: center;">Text 2</td> </tr> </tbody> </table> </td> <!-- Group 3--> <td> <table align="center"> <tbody> <tr> <td style="text-align: center;"><strong>Title 3</strong></td> </tr> <tr> <td style="text-align: center;">Text 3</td> </tr> </tbody> </table> </td> </table>

/* Generic Styling, for Desktops/Laptops */ table { width: 100%; border-collapse: collapse; } /* Zebra striping */ tr:nth-of-type(odd) { background: #eee; } th { background: #333; color: white; font-weight: bold; } td, th { padding: 6px; text-align: left; } @media all and (max-width:500px) { table, thead, tbody, th, td, tr { display: block; } tr { margin-bottom: 10px} }