<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <br> <div class="container"> <div class="row "> <div class="col-md-12"> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Conceptual Data</a></li> <li class="breadcrumb-item active">Data Entity</li> <!-- <li class="breadcrumb-item active" aria-current="page">Logical Data Components</li> --> </ol> </nav> </div> </div> <div class="row"> <div class="col-md-12"> <div class="card border-primary mb-3" > <div class="card-header bg-primary text-light"> Data Entity</div> <div class="card-body"> <!-- Row 1 --> <div class="row "> <div class="col-md-12"> <table class="table detail border table-striped table-sm "> <tr> <th width='180'>Conceptual Data</th> <td width='250'>ลูกค้า</td> <th width='50'>Description</th> <td width='350'></td> <th width='50'>Status</th> <td><span class="badge badge-success">Active</span></td> </tr> </table> <!-- Table List LDC --> <table class="table table-sm border custab "> <thead class='thead-light'> <tr class='table-light'> <th>ID</th> <th>Data Entities</th> <th>Description</th> <th class="text-center">Status</th> </tr> </thead> <tbody > <tr> <td>1</td> <td><a href="#">ผู้มุ่งหวัง</a> </td> <td></td> <td class="text-center"><span class="badge badge-success">Active</span></td> </tr> <tr> <td>2</td> <td><a href="#">ผู้เอาประกัน</a></td> <td></td> <td class="text-center"><span class="badge badge-success">Active</span></td> </tr> <tr> <td>3</td> <td><a href="#">ผู้รับผลประโยชน์</a></td> <td></td> <td class="text-center"><span class="badge badge-secondary">Inactive</span></td> </tr> <tr> <td>4</td> <td><a href="#">ผู้ชำระเบี้ยประกัน</a></td> <td></td> <td class="text-center"><span class="badge badge-secondary">Inactive</span></td> </tr> </tbody> </table> <!-- End Table List --> </div> </div> <!--End Row 1 --> <!-- Row 2 --> <!-- ENDRow 2 --> </div> </div> </div> </div> </div>

table.borderless td,table.borderless th{ border: none !important; } .custab{ border: 1px solid #ccc; padding: 5px; margin: 5% 0; box-shadow: 3px 3px 2px #ccc; transition: 0.5s; } .custab:hover{ box-shadow: 3px 3px 0px transparent; transition: 0.5s; }