<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> <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"><a href="#">Logical Data Components</a></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"><b>Logical Data Component</b></div> <div class="card-body"> <!-- Row 1 --> <div class="row "> <div class="col-md-4"> <div class="card mb-3" style="max-width: 35rem;"> <div class="card-header "><b>Description Logical Data Component</b></div> <div class="card-body "> <table class="table table-sm borderless" style="table-layout:fixed;"> <tbody> <tr> <th width='150px'>Conceptual Data</th> <td>ลูกค้า</td> </tr> <tr> <th>Data Entity</th> <td>ผู้ชำระเบี้ยประกัน</td> </tr> <tr> <th>LDC</th> <td>ข้อมูลระบุตัวบุคคล</td> </tr> <tr> <th>Description</th> <td></td> </tr> <tr> <th>Classification</th> <td><span class="badge badge-info">Internal Use</span></td> </tr> <tr> <th>Status</th> <td><span class="badge badge-success">Active</span></td> </tr> </tbody> </table> </div> </div> </div> <div class="col-md-4"> <div class="card mb-3" style="max-width: 35rem;"> <div class="card-header "><b>Retention</b></div> <div class="card-body "> <table class="table table-sm" style="table-layout:fixed;"> <tbody> <tr> <th width='150'>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> </div> <div class="col-md-4"> <div class="card mb-3" style="max-width: 35rem;"> <div class="card-header "><b>Data Owner</b></div> <div class="card-body "> <div class="row"> <div class="col-md-6"> <h6><a href="#" class="badge badge-primary">สายงานรับประกันชีวิตรายบุคคล </a></h6> <h6><a href="#" class="badge badge-primary">สายงานรับประกันและออกกรมธรรม์ ธุรกิจพันธมิตร </a></h6> <h6><a href="#" class="badge badge-primary">สายงานบริการผู้เอาประกัน </a></h6> <h6><a href="#" class="badge badge-primary">สายงานบริการผู้เอาประกัน ธุรกิจพันธมิตร </a></h6> <h6><a href="#" class="badge badge-primary">สายงานประกันชีวิตหมู่ </a></h6> <h6><a href="#" class="badge badge-primary">MIS & Database Division </a></h6> </div> </div> </div> </div> </div> </div> <!--End Row 1 --> <!-- ENDRow 2 --> <!-- Row3 --> <div class="row "> <div class="col-md-12"> <div class="card mb-3" style="max-width"> <div class="card-header "><b>Attribute</b></div> <div class="card-body"> <!-- <div class="table-responsive " > <table class="table table-bordered table-scroll table-sm" > <thead class='bg-light border text-center'> <tr> <th colspan='3' style="width: 36%" >Logical Data Component Attribute</th> <th colspan='6'>Physical Data</th> </tr> <tr> <th >Attribute</th> <th>Description</th> <th>Standard</th> <td>mstperson</td> <td>cunderwrite</td> <td>newcasexxx</td> <td>cimb</td> <td>cimb</td> <td>cimb</td> </tr> </thead> <tbody class='text-small'> <tr> <td>ID Card</td> <td>เลขบัตรประชาชน</td> <td>เลขบัตรประชาชน </td> <td> payer.idNo</td> <td> </td> <td> </td> <td> </td> <td>cimb</td> <td>cimb</td> </tr> <tr> <td>First Name</td> <td>ชื่อ</td> <td>ตัวอักษรเท่านั้น</td> <td>opayer.payerName</td> <td>dmpayer####.firstName </td> <td> laser_payer###.payerName</td> <td >tlpayer.payerName <br> payer.payerName </td> <td>cisadasdasdasmb</td> <td>cifdgddsadasdasdafgdfgdfgmb</td> </tr> <tr> <td>Last Name</td> <td>นามสกุล</td> <td>ตัวอักษรเท่านั้น</td> <td></td> <td> </td> <td>dmpayer####.payerName </td> <td> </td> <td>dfgdfgdfgdfgdfg</td> <td>fgdfgdfgdfgdfg</td> </tr> <tr> <td>Birthdate</td> <td>วันเกิด</td> <td>ตัวอักษรเท่านั้น</td> <td>payer.birthDate</td> <td> </td> <td> </td> <td> </td> <td>หกดหกดfdgdfgdfgdfgdfg</td> <td>หกดหกดหกดหกfdfsdfsdf</td> </tr> </tbody> </table> </div> --> <div id="table-scroll" class="table-scroll"> <div class="table-wrap"> <table class="main-table table-bordered table-scroll table-sm" > <thead class=" text-center"> <tr> <th colspan="3" class="fixed-side" scope="col" >Logical Data Component Attribute</th> <th colspan="6" >Physical Data</th> </tr> <tr> <th class="fixed-side" scope="col">Attribute</th> <th class="fixed-side" scope="col">Description</th> <th class="fixed-side" scope="col">Standard</th> <td >mstperson</td> <td>cunderwrite</td> <td>newcasexxx</td> <td>cimb</td> </tr> </thead> <tbody> <tr> <td class="fixed-side">ID Card</td> <td class="fixed-side">เลขบัตรประชาชน</td> <td class="fixed-side">เลขบัตรประชาชน </td> <td> payer.idNo</td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="fixed-side">First Name</td> <td class="fixed-side">ชื่อ</td> <td class="fixed-side">ตัวอักษรเท่านั้น</td> <td>opayer.payerName</td> <td>dmpayer####.firstName </td> <td> laser_payer###.payerName</td> <td >tlpayer.payerName <br> payer.payerName </td> </tr> <tr> <td class="fixed-side">Last Name</td> <td class="fixed-side">นามสกุล</td> <td class="fixed-side">ตัวอักษรเท่านั้น</td> <td></td> <td> </td> <td>dmpayer####.payerName </td> <td> </td> </tr> <tr> <td class="fixed-side">Birthdate</td> <td class="fixed-side">วันเกิด</td> <td class="fixed-side">ตัวอักษรเท่านั้น</td> <td>payer.birthDate</td> <td> </td> <td> </td> <td> </td> </tr> </tbody> </table> </div> </div> <!-- ----------------------------------------------------------> </div> </div> </div> <!-- End Row3 --> </div> </div> </div> </div> </div>

/* table { table-layout: fixed; } table th, table td { overflow: hidden; } */ .table-scroll { position:relative; /* max-width:800px;*/ /* margin:auto; */ overflow:hidden; border:1px solid #FFF; } .table-wrap { /* width:100%; */ overflow:auto; } .table-scroll table { width:100%; margin:auto; border-collapse:separate; border-spacing:0; } .table-scroll th, .table-scroll td { padding:5px 10px; border:1px solid #000; background:#fff; white-space:nowrap; /* vertical-align:top; */ } .table-scroll thead, .table-scroll tfoot { background:#f9f9f9; } .clone { position:absolute; top:0; left:0; pointer-events:none; } .clone th, .clone td { visibility:hidden } .clone th { border-color:transparent ; } .clone tbody th { /* visibility:visible; */ /* color:red; */ } .clone .fixed-side { border:1px solid #D3D3D3; /* background:#eee;*/ visibility:visible; } .clone thead, .clone tfoot{ background:transparent;}

// requires jquery library jQuery(document).ready(function() { jQuery(".main-table").clone(true).appendTo('#table-scroll').addClass('clone'); });