10 Feb 2022 08:40
Dipost oleh Admin
891
0
Sobatcoding.com - Cara Freeze Table Column Seperti Excel Menggunakan HTML dan CSS
Buatlah sebuah view seperti berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Freeze</title>
</head>
<body>
<div id="table-scroll" class="table-scroll">
<div class="table-wrap">
<table class="main-table">
<thead>
<tr>
<th class="fixed-side" scope="col"> </th>
<th class="fixed-side" scope="col">Nama</th>
<th scope="col">Tempat Lahir</th>
<th scope="col">Tgl. Lahir</th>
<th scope="col">Kelamin</th>
<th scope="col">Alamat</th>
<th scope="col">Kota</th>
<th scope="col">Telp.</th>
</tr>
</thead>
<tbody>
<tr>
<th class="fixed-side">1</th>
<td class="fixed-side">Bayu Gatra</td>
<td>Malang</td>
<td>22/01/1980</td>
<td>L</td>
<td>Jl. A. Yani No. 45</td>
<td>Malang</td>
<td>+62xxxx</td>
</tr>
<tr>
<th class="fixed-side">2</th>
<td class="fixed-side">Indah Karunia Dewi</td>
<td>Malang</td>
<td>04/03/1985</td>
<td>P</td>
<td>Jl. Diponegoro No. 20</td>
<td>Malang</td>
<td>+62xxxx</td>
</tr>
<tr>
<th class="fixed-side">3</th>
<td class="fixed-side">Prayoga Adi Muhammad</td>
<td>Malang</td>
<td>11/05/1990</td>
<td>L</td>
<td>Jl. Letjen S. Parman No. 100</td>
<td>Malang</td>
<td>+62xxxx</td>
</tr>
<tr>
<th class="fixed-side">4</th>
<td class="fixed-side">Intan Nuraini</td>
<td>Surabaya</td>
<td>15/10/1980</td>
<td>P</td>
<td>Jl. A Yani No 100 Gg 2</td>
<td>Surabaya</td>
<td>+62xxxx</td>
</tr>
<tr>
<th class="fixed-side">5</th>
<td class="fixed-side">Budi G. Pamungkas</td>
<td>Bojonegoro</td>
<td>06/04/1990</td>
<td>L</td>
<td>Terminal Lama Gg II No 44</td>
<td>Bojonegoro</td>
<td>+62xxxx</td>
</tr>
<tr>
<th class="fixed-side">6</th>
<td class="fixed-side">Lolita</td>
<td>Madiun</td>
<td>24/03/1980</td>
<td>P</td>
<td>Staisun Kota Baru No 55</td>
<td>Madiun</td>
<td>+62xxxx</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</html>Tambahkan css :
.table-scroll {
position:relative;
max-width:600px;
margin:auto;
overflow:hidden;
border:1px solid #000;
}
.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 td, .clone th {
border-color:transparent
}
.clone tbody th {
visibility:visible;
}
.clone .fixed-side {
border:1px solid #000;
visibility:visible;
}
.clone thead, .clone tfoot{background:transparent;}Tambahkan script js :
$(document).ready(function() {
var w = $( document ).width();
$('.table-scroll').css('max-width', w + 'px');
$(".main-table").clone(true).appendTo('#table-scroll').addClass('clone');
});
Demikian tutorial kali ini, Jika teman-teman memiliki pertanyaan atau saran mengenai artikel ini, jangan ragu untuk meninggalkan komentar pada form di bawah ini.
CodeIgniter (22)
Komentar 0