<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/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <div class="container"> <div class="row col-md-12 col-md-offset-0 custyle"> <ul class="breadcrumb"> <li><a href="#">Conceptual Data</a></li> <li><a href="#">Data Entity</a></li> <li><a href="#">Logical Data Components</a></li> <li><a href="#">Attributes</a></li> </ul> <div class="panel panel-primary"> <div class="panel-heading"> 2563 / HOA-01 </div> <div class="panel-body"> <div class="row"> <div class="col-lg-12"> <table class="table detail border table-striped table-sm"> <tr> <th width='100'>ชื่อโครงการ</th> <td width='250'>ระบบควบคุมดูแล ซ่อมแซม บำรุงรักษา</td> </tr> <tr> <th>วัตถุประสงค์</th> <td>เพื่อทราบว่าระบบควบคุมดูแล ซ่อมแซม และบำรุงรักษา มีประสิทธิภาพเพียงพอ</td> </tr> <tr> <th>รหัสหน่วยงานผู้รับการตรวจ</th> <td>สำนักงานอาคาร</td> </tr> <tr> <th>ผู้ตรวจโครงการ</th> <td>ซ่อมแซม รักษา<br> xxxx.yyy@abcd.com <br> 2857</td> </tr> <tr> <th>ระยะเวลาการเข้าถึงข้อมูล</th> <td>มกราคม 2563 - ธันวาคม 2563</td> </tr> <tr> <th> วันที่เริ่มตรวจโครงการ</th> <td>6 มกราคม 2563</td> </tr> <tr> <th> สถานะโครงการ</th> <td><span class="badge badge-primary">Success</span></td> </tr> </table> <table class="table table-sm border custab "> <thead class=" text-center"> <tr tr class='table-light'> <th colspan="4" class="fixed-side" scope="col" >Application</th> <th colspan="3" >DFD</th> <th colspan="3" >ER</th> </tr> <tr> <th class="fixed-side" scope="col">No.</th> <th class="fixed-side" scope="col">Application</th> <th class="fixed-side" scope="col">Dev</th> <th>Architect</th> <th>Start</th> <th>End</th> <th>Status</th> <th>Start</th> <th>End</th> <th>Status</th> </tr> </thead> <tbody > <tr> <td>1</td> <td><a href="#">ระบควบคุมดูแล ซ่อมแซม บำรุงรักษา</a> </td> <td></td> <td></td> <td>สำนักงานอาคาร</td> <td></td> <td>Jan - Dec 2020</td> <td>6 Jan 2020</td> <td></td> <td></td> </tr> <tr> <td>2</td> <td><a href="#">ระบบ A</a></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>3</td> <td><a href="#">ระบบ B</a></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> </div> </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;}