<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"><a href="#">Data Entity</a></li> <li class="breadcrumb-item active">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">Logical Data Component</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='150'>Conceptual Data</th> <td width='250'><a href='#'>ลูกค้า</a></td> <th width='50'>Description</th> <td width='300'></td> <th width='50'>Status</th> <td><span class="badge badge-success">Active</span></td> </tr> <tr> <th>Data Entity</th> <td>ผู้ชำระเบี้ยประกัน</t> <th>Description</th> <td></td> <th>Status</th> <td><span class="badge badge-success">Active</span></td> </tr> </table> <!-- Table List LDC --> <table class="table table-sm border custab "> <thead > <tr class='table-light'> <th>ID</th> <th>Logical Data Component</th> <th>Description</th> <th class="text-center">Classification Level</th> <th class="text-center">Status</th> <th class="text-center">Retention</th> </tr> </thead> <tbody > <tr> <td>1</td> <td><a href="#">ข้อมูลระบุตัวบุคคล</a> </td> <td></td> <td class="text-center"><span class="badge badge-primary">Public</span></td> <td class="text-center"><span class="badge badge-success">Active</span></td> <td class="text-center"> <a class='btn btn-default btn-xs' href="#retention" data-toggle="modal" > <i class="fa fa-search pull-right"></i> </a> <!-- Modal --> <div class="modal fade" id="retention" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Retention</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body "> <table class="table detail table-sm border text-left"> <tbody> <tr> <th width='220'>Conceptual Data</th> <td>ลูกค้า</td> </tr> <tr> <th>Data Entity</th> <td>ผู้ชำระเบี้ยประกัน</td> </tr> <tr> <th>Logical Data Component</th> <td>ข้อมูลระบุตัวบุคคล</td> </tr> <tr> <th>Retention Name</th> <td></td> </tr> <tr> <th>Description</th> <td></td> </tr> <tr> <th>Retention Period</th> <td></td> </tr> <tr> <th>Storage Type</th> <td><span class="badge badge-danger">Delete</span></td> </tr> <tr> <th>Start Date</th> <td></td> </tr> <tr> <th>End Date</th> <td></td> </tr> </tbody> </table> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <!-- Modal --> </td> </tr> <tr> <td>2</td> <td><a href="#">การติดต่อ</a></td> <td></td> <td class="text-center"><span class="badge badge-info">Internal Use</span></td> <td class="text-center"><span class="badge badge-success">Active</span></td> <td class="text-center"><a class='btn btn-default btn-xs' href="#"><i class="fa fa-search pull-right"></i> </a></td> </tr> <tr> <td>3</td> <td><a href="#">การประกันชีวิต</a></td> <td></td> <td class="text-center"><span class="badge badge-warning">Confidential</span></td> <td class="text-center"><span class="badge badge-secondary">Inactive</span></td> <td class="text-center"><a class='btn btn-default btn-xs' href="#"><i class="fa fa-search pull-right"></i> </a></td> </tr> <tr> <td>4</td> <td><a href="#">Bankruptcy</a></td> <td></td> <td class="text-center"><span class="badge badge-danger">Secret</span></td> <td class="text-center"><span class="badge badge-secondary">Inactive</span></td> <td class="text-center"><a class='btn btn-default btn-xs' href="#"><i class="fa fa-search pull-right"></i> </a></td> </tr> <tr> <td>5</td> <td><a href="#">FATCA</a></td> <td></td> <td class="text-center"><span class="badge badge-danger">Secret</span></td> <td class="text-center"><span class="badge badge-success">Active</span></td> <td class="text-center"><a class='btn btn-default btn-xs' href="#"><i class="fa fa-search pull-right"></i> </a></td> </tr> <tr> <td>6</td> <td><a href="#">AMLO</a></td> <td></td> <td class="text-center"><span class="badge badge-warning">Confidential</span></td> <td class="text-center"><span class="badge badge-success">Active</span></td> <td class="text-center"><a class='btn btn-default btn-xs' href="#"><i class="fa fa-search pull-right"></i> </a></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; }