<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/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"> <nav aria-label="breadcrumb"> <div class="alert alert-secondary" role="alert"> โครงการตรวจสอบประจำปี 2563</div> </nav> </div> </div> <div class="row"> <div class="col-md-36"> <div class="card border-dark mb-3" > <div class="card-header bg-dark text-light"><b>โครงการตรวจสอบประจำปี 2563</b></div> <div class="card-body"> <!-- ENDRow 2 --> <!-- Row3 --> <!-- End Row3 --> <table class="table table-sm border custab "> <thead class=" text-center"> <tr tr class='table-light'> <th colspan="4" class="fixed-side" scope="col" >Project</th> <th colspan="1" ></th> <th colspan="1" >Auditor</th> <th colspan="2" >Access Data</th> </tr> <tr> <th class="fixed-side" scope="col">No.</th> <th class="fixed-side" scope="col">Code</th> <th class="fixed-side" scope="col">Name</th> <th>Objective</th> <th>Business Unit</th> <th>Name</th> <th>Access Data</th> <th>Start Date</th> </tr> </thead> <tbody > <tr> <td>1</td> <td></td> <td><a href="#">ระบควบคุมดูแล ซ่อมแซม บำรุงรักษา</a> </td> <td>เพื่อทราบว่าระบบควบคุมดูแล ซ่อมแซม และบำรุงรักษา มีประสิทธิภาพเพียงพอ</td> <td>สำนักงานอาคาร</td> <td></td> <td>Jan - Dec 2020</td> <td>6 Jan 2020</td> </tr> <tr> <td>2</td> <td></td> <td><a href="#">ระบบ A</a></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>3</td> <td></td> <td><a href="#">ระบบ B</a></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>4</td> <td></td> <td><a href="#">ระบบ C</a></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>5</td> <td></td> <td><a href="#">ระบบ D</a></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>6</td> <td></td> <td><a href="#">ระบบ E</a></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> </div> </div> </div> </div> </div>

/* table { table-layout: fixed; } table th, table td { overflow: hidden; } */ .table-scroll { position:relative; /* max-width:1080px;/* /* 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, .tabwile-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'); });