<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="panel panel-default panel-table"> <div class="panel-heading"> <div class="tr"> <div class="td">heading</div> <div class="td">heading</div> <div class="td">heading</div> </div> </div> </div>

/* * See it in action here: http://jsfiddle.net/seydoggy/6s92p51a/ */ .panel-table { display:table; } .panel-table > .panel-heading { display: table-header-group; background: transparent; } .panel-table { display: table-row-group; } .panel-table :before, .panel-table :after { content:none; } .panel-table{ display: table-footer-group; background: transparent; } .panel-table > div > .tr { display: table-row; } .panel-table > div:last-child > .tr:last-child > .td { border-bottom: none; } .panel-table .td { display: table-cell; padding: 15px; border: 1px solid #ddd; border-top: none; border-left: none; } .panel-table .td:last-child { border-right: none; } .panel-table > .panel-heading > .tr > .td, .panel-table > .tr > .td { background-color: #f5f5f5; } .panel-table > .panel-heading > .tr > .td:first-child { border-radius: 4px 0 0 0; } .panel-table > .panel-heading > .tr > .td:last-child { border-radius: 0 4px 0 0; } .panel-table > .tr > .td:first-child { border-radius: 0 0 0 4px; } .panel-table > .tr > .td:last-child { border-radius: 0 0 4px 0; }