<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 active">Conceptual Data</li> <!-- <li class="breadcrumb-item active" aria-current="page"> 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"> Conceptual Data </div> <div class="card-body"> <!-- Row 1 --> <div class="row "> <div class="col-md-12"> <!-- Table List LDC --> <table class="table table-sm border custab "> <thead class='thead-light'> <tr class='table-light'> <th>ID</th> <th>Conceptual Data </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="#">Stakeholders</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> <tr> <td>5</td> <td><a href="#">การชำระเบี้ยประกัน</a></td> <td></td> <td class="text-center"><span class="badge badge-success">Active</span></td> </tr> <tr> <td>6</td> <td><a href="#">สินไหม</a></td> <td></td> <td class="text-center"><span class="badge badge-success">Active</span></td> </tr> </tbody> </table> <!-- End Table List --> </div> </div> <!--End Row 1 --> <!-- Row 2 --> <!-- ENDRow 2 --> </div> </div> </div> </div> </div>

.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; }