问题
i am setting up a html table which has header <thead> with 2 <tr> which includes rowspan and colspan and i want to fixed that <thead> part in my html table
<style type="text/css">
table#customers {
display: table;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#customers td, #customers th {
border: 1px solid #ddd;
padding: 8px;
}
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}
#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #2C3B49;
color: white;
}
</style>
here the table
<table id="customers">
<thead>
<tr>
<th rowspan="2">rowspan="2"</th>
<th rowspan="2">
<center>rowspan="2"</center>
</th>
<th colspan="4">
<center>colspan="4"</center>
</th>
<th colspan="4">
<center>colspan="4"</center>
</th>
<th colspan="4">
<center>colspan="4"</center>
</th>
</tr>
<tr>
<th>
<center>text 1</center>
</th>
<th>
<center>text 2</center>
</th>
<th>
<center>text 3</center>
</th>
<th>
<center>text 4</center>
</th>
<th>
<center>text 1</center>
</th>
<th>
<center>text 2</center>
</th>
<th>
<center>text 3</center>
</th>
<th>
<center>text 4</center>
</th>
<th>
<center>text 1</center>
</th>
<th>
<center>text 2</center>
</th>
<th>
<center>text 3</center>
</th>
<th>
<center>text 4</center>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>test</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
</tr>
<tr>
<td>test</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
</tr>
<tr>
<td>test</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
</tr>
<tr>
<td>test</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
</tr>
<tr>
<td>test</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
</tr>
<tr>
<td>test</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
</tr>
<tr>
<td>test</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
</tr>
<tr>
<td>test</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
</tr>
<tr>
<td>test</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
</tr>
<tr>
<td>test</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
</tr>
<tr>
<td>test</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
</tr>
<tr>
<td>test</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
</tr>
<tr>
<td>test</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
</tr>
</tbody>
</table>
here the screen shot what i made https://prnt.sc/oz2p1f
what i want is, the whole <thead> tag will fixed with both scroll, i tried a so many ways but i didn't get any of perfect example which were helped me.
here is anyone can help me ? for this Thank you in advance
回答1:
Add this <div> around your table:
<div class="tableFixHead"></div>
Add this CSS:
.tableFixHead { overflow-y: auto; height: 400px; }
And this jQuery:
var $th = $('.tableFixHead').find('thead th')
$('.tableFixHead').on('scroll', function() {
$th.css('transform', 'translateY('+ this.scrollTop +'px)');
});
JSFiddle: https://jsfiddle.net/mvoisard/unLx7h1z/8/
回答2:
You will need a plugin to do that.
I personnaly use floatThead to do that
It is simple to use
First you include the floatThead module and jquery
<script src="YOUR_JQUERY_FOLDER/jquery.min.js" type="text/javascript"></script>
<script src="YOUR_MODULE_FOLDER/jquery.floatThead.min.js" type="text/javascript"></script>
Then you go like this
<script>
$(document).ready(function(){
$('#customers').floatThead();
});
</script>
回答3:
The code bellow, or you could see here: https://github.com/FandiAR/advance-table-html
<!DOCTYPE html>
<html>
<head>
<style>
.container-recap {
margin: 0 auto;
overflow: auto;
width: 50vw;
height: 250px;
}
table {
table-layout: fixed;
width: 100%;
}
th,
td {
border: 1px solid #000;
width: 100px;
}
th {
background-color: aqua;
}
.no-th {
position: sticky;
top: 0;
left: 0;
z-index: 1;
background-color: yellow;
text-align: center;
}
.name-th {
position: sticky;
top: 0;
left: 103px;
z-index: 1;
background-color: yellow;
text-align: center;
}
.izin-th {
position: sticky;
top: 0;
right: 0;
z-index: 1;
background-color: aquamarine;
text-align: center;
}
.hadir-th {
position: sticky;
top: 0;
right: 103px;
z-index: 1;
background-color: aquamarine;
text-align: center;
}
.no-td {
position: sticky;
left: 0;
z-index: 1;
background: whitesmoke;
color: black;
text-align: center;
}
.name-td {
position: sticky;
left: 103px;
z-index: 1;
background: whitesmoke;
color: black;
text-align: center;
}
.izin-td {
position: sticky;
right: 0;
z-index: 1;
background: whitesmoke;
color: black;
text-align: center;
}
.hadir-td {
position: sticky;
right: 103px;
z-index: 1;
background: whitesmoke;
color: black;
text-align: center;
}
.no-th,
.name-th,
.hadir-th,
.izin-th {
z-index: 3;
}
.th-th {
position: sticky;
top: 0;
}
.th-th-th {
position: sticky;
top: 23px;
}
</style>
</head>
<body>
<div class="container-recap">
<table>
<thead>
<tr>
<th rowspan="2" class="no-th">No.</th>
<th rowspan="2" class="name-th">Nama Murid</th>
<th colspan="2" class="th-th">First Th</th>
<th colspan="2" class="th-th">Second Th</th>
<th colspan="2" class="th-th">Third Th</th>
<th colspan="2" class="th-th">Forth Th</th>
<th colspan="2" class="th-th">Fifth Th</th>
<th rowspan="2" class="hadir-th">Hadir</th>
<th rowspan="2" class="izin-th">Izin</th>
</tr>
<tr>
<th class="th-th-th">Start</th>
<th class="th-th-th">End</th>
<th class="th-th-th">Start</th>
<th class="th-th-th">End</th>
<th class="th-th-th">Start</th>
<th class="th-th-th">End</th>
<th class="th-th-th">Start</th>
<th class="th-th-th">End</th>
<th class="th-th-th">Start</th>
<th class="th-th-th">End</th>
</tr>
</thead>
<tbody>
<tr>
<td class="no-td">1.</td>
<td class="name-td">John Ddoe</td>
<td>10.00</td>
<td>12.00</td>
<td>10.00</td>
<td>12.00</td>
<td>10.00</td>
<td>12.00</td>
<td>10.00</td>
<td>12.00</td>
<td>10.00</td>
<td>12.00</td>
<td class="hadir-td">1</td>
<td class="izin-td">1</td>
</tr>
<tr>
<td class="no-td">2.</td>
<td class="name-td">John Ddoe</td>
<td>12.00</td>
<td>14.00</td>
<td>10.00</td>
<td>12.00</td>
<td>10.00</td>
<td>12.00</td>
<td>10.00</td>
<td>12.00</td>
<td>10.00</td>
<td>12.00</td>
<td class="hadir-td">2</td>
<td class="izin-td">2</td>
</tr>
<tr>
<td class="no-td">3.</td>
<td class="name-td">John Ddoe</td>
<td>12.00</td>
<td>14.00</td>
<td>10.00</td>
<td>12.00</td>
<td>10.00</td>
<td>12.00</td>
<td>10.00</td>
<td>12.00</td>
<td>10.00</td>
<td>12.00</td>
<td class="hadir-td">2</td>
<td class="izin-td">2</td>
</tr>
<tr>
<td class="no-td">4.</td>
<td class="name-td">John Ddoe</td>
<td>12.00</td>
<td>14.00</td>
<td>10.00</td>
<td>12.00</td>
<td>10.00</td>
<td>12.00</td>
<td>10.00</td>
<td>12.00</td>
<td>10.00</td>
<td>12.00</td>
<td class="hadir-td">2</td>
<td class="izin-td">2</td>
</tr>
<tr>
<td class="no-td">5.</td>
<td class="name-td">John Ddoe</td>
<td>12.00</td>
<td>14.00</td>
<td>10.00</td>
<td>12.00</td>
<td>10.00</td>
<td>12.00</td>
<td>10.00</td>
<td>12.00</td>
<td>10.00</td>
<td>12.00</td>
<td class="hadir-td">2</td>
<td class="izin-td">2</td>
</tr>
<tr>
<td class="no-td">6.</td>
<td class="name-td">John Ddoe</td>
<td>12.00</td>
<td>14.00</td>
<td>10.00</td>
<td>12.00</td>
<td>10.00</td>
<td>12.00</td>
<td>10.00</td>
<td>12.00</td>
<td>10.00</td>
<td>12.00</td>
<td class="hadir-td">2</td>
<td class="izin-td">2</td>
</tr>
<tr>
<td class="no-td">7.</td>
<td class="name-td">John Ddoe</td>
<td>12.00</td>
<td>14.00</td>
<td>10.00</td>
<td>12.00</td>
<td>10.00</td>
<td>12.00</td>
<td>10.00</td>
<td>12.00</td>
<td>10.00</td>
<td>12.00</td>
<td class="hadir-td">2</td>
<td class="izin-td">2</td>
</tr>
<tr>
<td class="no-td">8.</td>
<td class="name-td">John Ddoe</td>
<td>12.00</td>
<td>14.00</td>
<td>10.00</td>
<td>12.00</td>
<td>10.00</td>
<td>12.00</td>
<td>10.00</td>
<td>12.00</td>
<td>10.00</td>
<td>12.00</td>
<td class="hadir-td">2</td>
<td class="izin-td">2</td>
</tr>
<tr>
<td class="no-td">9.</td>
<td class="name-td">John Ddoe</td>
<td>12.00</td>
<td>14.00</td>
<td>10.00</td>
<td>12.00</td>
<td>10.00</td>
<td>12.00</td>
<td>10.00</td>
<td>12.00</td>
<td>10.00</td>
<td>12.00</td>
<td class="hadir-td">2</td>
<td class="izin-td">2</td>
</tr>
<tr>
<td class="no-td">10.</td>
<td class="name-td">John Ddoe</td>
<td>12.00</td>
<td>14.00</td>
<td>10.00</td>
<td>12.00</td>
<td>10.00</td>
<td>12.00</td>
<td>10.00</td>
<td>12.00</td>
<td>10.00</td>
<td>12.00</td>
<td class="hadir-td">2</td>
<td class="izin-td">2</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
来源：https://stackoverflow.com/questions/57708086/how-to-fixed-header-in-html-table-with-have-multiple-row-header-with-rowspan-and