Menu
I am trying to freeze/lock the first row and the first column of a table.
I have tried giving thead position: absolute; or position: fixed; but it looks strange.
I have followed some answers but I am still confused how to make it.
My HTML / CSS Code :
th {
font-size: 80%;
text-align: center;
}
td {
font-size : 65%;
white-space: pre;
text-align: center;
}
.inner {
overflow-x: scroll;
overflow-y: scroll;
width: 300px;
height: 100px;
}
input {
font-size : 65%;
}<body>
<div class="inner">
<form method="POST" action="dashboard">
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Tanggal</th>
<th>Judul Pekerjaan</th>
<th>Deskripsi</th>
<th>Level</th>
<th>Category</th>
<th>Severity</th>
</tr>
</thead>
</form>
<tbody>
<tr>
<td>1</td>
<td>1 May 2017</td>
<td>Satu</td>
<td>Satu</td>
</tr>
<tr>
<td>2</td>
<td>2 May 2017</td>
<td>Dua</td>
<td>Dua</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
</tbody>
</table>
</div>
</body>
587
Freezing the first row can be done with CSS by setting the table body to overflow: auto, and giving a fixed width to the table cells. (See example 1)
However, to get this behavior for both first row and first column, you need to separate the first row, first column, and first cell from the table, and then continuously set the position of these elements based on the scrolled position of the table body, upon a scroll event. (See example 2)
Example 1: (Freeze first row only)
table thead tr {
display: block;
}
table th, table td {
width: 80px;
}
table tbody {
display: block;
height: 90px;
overflow: auto;
}
th {
text-align: center;
}
td {
text-align: center;
white-space: pre;
}<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Tanggal</th>
<th>Judul Pekerjaan</th>
<th>Deskripsi</th>
<th>Level</th>
<th>Category</th>
<th>Severity</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1 May 2017</td>
<td>Satu</td>
<td>Satu</td>
</tr>
<tr>
<td>2</td>
<td>2 May 2017</td>
<td>Dua</td>
<td>Dua</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
<tr>
<td>2</td>
<td>2 May 2017</td>
<td>Dua</td>
<td>Dua</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
</tbody>
</table>Example 2: (Freeze first row and first column)
$(document).ready(function() {
$('tbody').scroll(function(e) {
$('thead').css("left", -$("tbody").scrollLeft());
$('thead th:nth-child(1)').css("left", $("tbody").scrollLeft()-5);
$('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft()-5);
});
});body {
margin: 0;
}
th, td {
text-align: center;
background-color: white
}
table {
position: relative;
width: 400px;
overflow: hidden;
}
thead {
position: relative;
display: block;
width: 400px;
overflow: visible;
}
thead th {
min-width: 80px;
height: 40px;
}
thead th:nth-child(1) {
position: relative;
display: block;
height: 40px;
padding-top: 20px;
}
tbody {
position: relative;
display: block;
width: 400px;
height: 90px;
overflow: scroll;
}
tbody td {
min-width: 80px;
}
tbody tr td:nth-child(1) {
position: relative;
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Tanggal</th>
<th>Judul Pekerjaan</th>
<th>Deskripsi</th>
<th>Level</th>
<th>Category</th>
<th>Severity</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1 May 2017</td>
<td>Satu</td>
<td>Satu</td>
<td>5</td>
<td>Lorem</td>
<td>Ipsum</td>
</tr>
<tr>
<td>2</td>
<td>2 May 2017</td>
<td>Dua</td>
<td>Dua</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
<tr>
<td>2</td>
<td>2 May 2017</td>
<td>Dua</td>
<td>Dua</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
</tbody>
</table>If anyone struggles with such problem here is a solution for modern browsers without using jQuery or even JS - just pure HTML and CSS. The trick is to set table to relative position and first row and/or column cells to sticky position. I added explicitly background color and z-index values to have this overlapping feeling.
.wrapper {
overflow: auto;
height: 100px;
width: 200px;
}
table {
position: relative;
border-collapse: separate;
border-spacing: 0;
}
table th,
table td {
width: 50px;
padding: 5px;
background-color: white;
}
table tbody {
height: 90px;
}
table th {
text-align: center;
position: sticky;
top: 0;
z-index: 2;
}
table th:nth-child(1) {
left: 0;
z-index: 3;
}
table td {
text-align: center;
white-space: pre;
}
table tbody tr td:nth-child(1) {
position: sticky;
left: 0;
z-index: 1;
}<div class="wrapper">
<table class="table table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Age</th>
<th>Country</th>
<th>Hobbies</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>George</td>
<td>43</td>
<td>New Zealand</td>
</tr>
<tr>
<td>2</td>
<td>Ann</td>
<td>25</td>
<td>Great Britain</td>
</tr>
<tr>
<td>3</td>
<td>Alexander</td>
<td>41</td>
<td>Spain</td>
</tr>
<tr>
<td>4</td>
<td>Wasilij</td>
<td>63</td>
<td>Ukraine</td>
</tr>
<tr>
<td>1</td>
<td>George</td>
<td>43</td>
<td>New Zealand</td>
</tr>
<tr>
<td>1</td>
<td>George</td>
<td>43</td>
<td>New Zealand</td>
</tr>
<tr>
<td>1</td>
<td>George</td>
<td>43</td>
<td>New Zealand</td>
</tr>
</tbody>
</table>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
