Pankaj Chauhan
Reputation: 36
How to Fixed Header in html table with have multiple row header with row-span and coll-span
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
Upvotes: 0
Views: 4456
Answers (4)
Wangwang Shi
Reputation: 1
try this with pure css and html.
* {
margin: 0;
padding: 0;
}
body {
padding: 40px;
background-color: #f4f4f4;
}
table {
position: relative;
border-collapse: collapse;
margin: 0 auto;
width: 60%;
}
table th, table td {
text-align: center;
height: 40px;
line-height: 40px;
padding: 0 15px;
}
table thead th {
background: white;
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 10;
font-size: 14px;
}
table thead th:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
height: 80px;
border-top: 1px solid #dcebff;
border-bottom: 1px solid #dcebff;
border-right: 1px solid #dcebff;
background-color: aliceblue;
z-index: -1;
}
table thead th:first-child:after {
border-left: 1px solid #dcebff;
}
table thead th.multiple-col {
padding: 0;
}
table thead th.multiple-col > div {
height: 40px;
box-sizing: border-box;
}
table thead th.multiple-col > div:first-child {
border-bottom: 1px solid #dcebff;
}
table thead th.multiple-col > div:last-child {
display: flex;
}
table thead th.multiple-col > div:last-child > div {
position: relative;
width: 50%;
}
table thead th.multiple-col > div:last-child > div:first-child:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
border-right: 1px solid #dcebff;
}
table tbody > tr > td {
position: relative;
font-size: 14px;
z-index: 5;
background-color: #fff;
font-size: 13px;
}
table tbody > tr > td > div {
position: relative;
z-index: 30;
line-height: 24px;
}
table tbody > tr > td:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
border-bottom: 1px solid #dcebff;
border-right: 1px solid #dcebff;
}
table tbody > tr > td:first-child:after {
border-left: 1px solid #dcebff;
}
table tbody > tr > td:first-child, table tbody > tr > td:nth-child(2) {
width: 180px;
margin: 0 auto;
}<body>
<table id="table_main">
<thead>
<tr>
<th class="multiple-col" colspan="2">
<div>Personal Info</div>
<div>
<div>Name</div>
<div>Age</div>
</div>
</th>
<th>Job</th>
<th>Color</th>
<th>URL</th>
</tr>
</thead>
<tbody>
<tr>
<td><div>Lorem.</div></td>
<td><div>Ullam.</div></td>
<td><div>Vel.</div></td>
<td><div>At.</div></td>
<td><div>Quis.</div></td>
</tr>
<tr>
<td><div>Quas!</div></td>
<td><div>Velit.</div></td>
<td><div>Quisquam?</div></td>
<td><div>Rerum?</div></td>
<td><div>Iusto?</div></td>
</tr>
<tr>
<td><div>Voluptates!</div></td>
<td><div>Fugiat?</div></td>
<td><div>Alias.</div></td>
<td><div>Doloribus.</div></td>
<td><div>Veritatis.</div></td>
</tr>
<tr>
<td><div>Maiores.</div></td>
<td><div>Ab.</div></td>
<td><div>Accusantium.</div></td>
<td><div>Ullam!</div></td>
<td><div>Eveniet.</div></td>
</tr>
<tr>
<td><div>Hic.</div></td>
<td><div>Id!</div></td>
<td><div>Officiis.</div></td>
<td><div>Modi!</div></td>
<td><div>Obcaecati.</div></td>
</tr>
<tr>
<td><div>Soluta.</div></td>
<td><div>Ad!</div></td>
<td><div>Impedit.</div></td>
<td><div>Alias!</div></td>
<td><div>Ad.</div></td>
</tr>
<tr>
<td><div>Expedita.</div></td>
<td><div>Quo.</div></td>
<td><div>Exercitationem!</div></td>
<td><div>Optio?</div></td>
<td><div>Ipsum?</div></td>
</tr>
<tr>
<td><div>Commodi!</div></td>
<td><div>Rem.</div></td>
<td><div>Aspernatur.</div></td>
<td><div>Accusantium!</div></td>
<td><div>Maiores.</div></td>
</tr>
<tr>
<td><div>Omnis.</div></td>
<td><div>Cumque?</div></td>
<td><div>Eveniet!</div></td>
<td><div>Mollitia?</div></td>
<td><div>Vero.</div></td>
</tr>
<tr>
<td><div>Error!</div></td>
<td><div>Inventore.</div></td>
<td><div>Quasi!</div></td>
<td><div>Ducimus.</div></td>
<td><div>Repudiandae!</div></td>
</tr>
<tr>
<td><div>Dolores!</div></td>
<td><div>Necessitatibus.</div></td>
<td><div>Corrupti!</div></td>
<td><div>Eum.</div></td>
<td><div>Sunt!</div></td>
</tr>
<tr>
<td><div>Ea.</div></td>
<td><div>Culpa?</div></td>
<td><div>Quam?</div></td>
<td><div>Nemo!</div></td>
<td><div>Sit!</div></td>
</tr>
<tr>
<td><div>Veritatis!</div></td>
<td><div>Facilis.</div></td>
<td><div>Expedita?</div></td>
<td><div>Ipsam!</div></td>
<td><div>Omnis!</div></td>
</tr>
<tr>
<td><div>Vitae.</div></td>
<td><div>Cumque.</div></td>
<td><div>Repudiandae.</div></td>
<td><div>Ut?</div></td>
<td><div>Sed!</div></td>
</tr>
<tr>
<td><div>Accusantium.</div></td>
<td><div>Adipisci.</div></td>
<td><div>Sit.</div></td>
<td><div>Maxime.</div></td>
<td><div>Harum.</div></td>
</tr>
<tr>
<td><div>Qui!</div></td>
<td><div>Accusamus?</div></td>
<td><div>Minima?</div></td>
<td><div>Dolorum.</div></td>
<td><div>Molestiae.</div></td>
</tr>
<tr>
<td><div>Vero!</div></td>
<td><div>Voluptatum?</div></td>
<td><div>Ea?</div></td>
<td><div>Odit!</div></td>
<td><div>A.</div></td>
</tr>
<tr>
<td><div>Debitis.</div></td>
<td><div>Veniam.</div></td>
<td><div>Fuga.</div></td>
<td><div>Alias!</div></td>
<td><div>Recusandae!</div></td>
</tr>
<tr>
<td><div>Aperiam!</div></td>
<td><div>Dolorum.</div></td>
<td><div>Enim.</div></td>
<td><div>Sapiente!</div></td>
<td><div>Suscipit?</div></td>
</tr>
<tr>
<td><div>Consequuntur.</div></td>
<td><div>Doloremque.</div></td>
<td><div>Illum!</div></td>
<td><div>Iste!</div></td>
<td><div>Sint!</div></td>
</tr>
<tr>
<td><div>Facilis.</div></td>
<td><div>Error.</div></td>
<td><div>Fugiat.</div></td>
<td><div>At.</div></td>
<td><div>Modi?</div></td>
</tr>
<tr>
<td><div>Voluptatibus!</div></td>
<td><div>Alias.</div></td>
<td><div>Eaque.</div></td>
<td><div>Cum.</div></td>
<td><div>Ducimus!</div></td>
</tr>
<tr>
<td><div>Nihil.</div></td>
<td><div>Enim.</div></td>
<td><div>Earum?</div></td>
<td><div>Nobis?</div></td>
<td><div>Eveniet.</div></td>
</tr>
<tr>
<td><div>Eum!</div></td>
<td><div>Id?</div></td>
<td><div>Molestiae.</div></td>
<td><div>Velit.</div></td>
<td><div>Minima.</div></td>
</tr>
<tr>
<td><div>Sapiente?</div></td>
<td><div>Neque.</div></td>
<td><div>Obcaecati!</div></td>
<td><div>Earum.</div></td>
<td><div>Esse.</div></td>
</tr>
<tr>
<td><div>Nam?</div></td>
<td><div>Ipsam!</div></td>
<td><div>Provident.</div></td>
<td><div>Ullam.</div></td>
<td><div>Quae?</div></td>
</tr>
<tr>
<td><div>Amet!</div></td>
<td><div>In.</div></td>
<td><div>Officia!</div></td>
<td><div>Natus?</div></td>
<td><div>Tempore?</div></td>
</tr>
<tr>
<td><div>Consequatur.</div></td>
<td><div>Hic.</div></td>
<td><div>Officia.</div></td>
<td><div>Itaque?</div></td>
<td><div>Quasi.</div></td>
</tr>
<tr>
<td><div>Enim.</div></td>
<td><div>Tenetur.</div></td>
<td><div>Asperiores?</div></td>
<td><div>Eos!</div></td>
<td><div>Libero.</div></td>
</tr>
<tr>
<td><div>Exercitationem.</div></td>
<td><div>Quidem!</div></td>
<td><div>Beatae?</div></td>
<td><div>Adipisci?</div></td>
<td><div>Accusamus.</div></td>
</tr>
<tr>
<td><div>Omnis.</div></td>
<td><div>Accusamus?</div></td>
<td><div>Eius!</div></td>
<td><div>Recusandae!</div></td>
<td><div>Dolor.</div></td>
</tr>
<tr>
<td><div>Magni.</div></td>
<td><div>Temporibus!</div></td>
<td><div>Odio!</div></td>
<td><div>Odit!</div></td>
<td><div>Voluptatum?</div></td>
</tr>
<tr>
<td><div>Eum.</div></td>
<td><div>Animi!</div></td>
<td><div>Labore.</div></td>
<td><div>Alias!</div></td>
<td><div>Fuga.</div></td>
</tr>
<tr>
<td><div>Quia!</div></td>
<td><div>Quis.</div></td>
<td><div>Neque?</div></td>
<td><div>Illo.</div></td>
<td><div>Ad.</div></td>
</tr>
<tr>
<td><div>Officiis.</div></td>
<td><div>Exercitationem!</div></td>
<td><div>Adipisci?</div></td>
<td><div>Officiis?</div></td>
<td><div>In?</div></td>
</tr>
<tr>
<td><div>Voluptates?</div></td>
<td><div>Voluptatum.</div></td>
<td><div>Nihil.</div></td>
<td><div>Totam?</div></td>
<td><div>Quisquam!</div></td>
</tr>
<tr>
<td><div>Soluta.</div></td>
<td><div>Tempore!</div></td>
<td><div>Cupiditate.</div></td>
<td><div>Beatae.</div></td>
<td><div>Perspiciatis.</div></td>
</tr>
<tr>
<td><div>Porro.</div></td>
<td><div>Officia?</div></td>
<td><div>Error.</div></td>
<td><div>Culpa?</div></td>
<td><div>Fugit.</div></td>
</tr>
<tr>
<td><div>Et?</div></td>
<td><div>Nemo.</div></td>
<td><div>Nisi?</div></td>
<td><div>Totam!</div></td>
<td><div>Voluptate.</div></td>
</tr>
<tr>
<td><div>Saepe?</div></td>
<td><div>Vero.</div></td>
<td><div>Amet?</div></td>
<td><div>Illo!</div></td>
<td><div>Laborum!</div></td>
</tr>
<tr>
<td><div>Atque!</div></td>
<td><div>Tenetur.</div></td>
<td><div>Optio.</div></td>
<td><div>Iure.</div></td>
<td><div>Porro.</div></td>
</tr>
<tr>
<td><div>Atque.</div></td>
<td><div>Alias.</div></td>
<td><div>Doloremque.</div></td>
<td><div>Velit.</div></td>
<td><div>Culpa.</div></td>
</tr>
<tr>
<td><div>Placeat?</div></td>
<td><div>Necessitatibus.</div></td>
<td><div>Voluptate!</div></td>
<td><div>Possimus.</div></td>
<td><div>Nam?</div></td>
</tr>
<tr>
<td><div>Illum!</div></td>
<td><div>Quae.</div></td>
<td><div>Expedita!</div></td>
<td><div>Omnis.</div></td>
<td><div>Nam.</div></td>
</tr>
<tr>
<td><div>Consequuntur!</div></td>
<td><div>Consectetur!</div></td>
<td><div>Provident!</div></td>
<td><div>Consequuntur!</div></td>
<td><div>Distinctio.</div></td>
</tr>
<tr>
<td><div>Aperiam!</div></td>
<td><div>Voluptatem.</div></td>
<td><div>Cupiditate!</div></td>
<td><div>Quae.</div></td>
<td><div>Praesentium.</div></td>
</tr>
<tr>
<td><div>Possimus?</div></td>
<td><div>Qui.</div></td>
<td><div>Consequuntur.</div></td>
<td><div>Deleniti.</div></td>
<td><div>Voluptas.</div></td>
</tr>
<tr>
<td><div>Hic?</div></td>
<td><div>Ab.</div></td>
<td><div>Asperiores?</div></td>
<td><div>Omnis.</div></td>
<td><div>Animi!</div></td>
</tr>
<tr>
<td><div>Cupiditate.</div></td>
<td><div>Velit.</div></td>
<td><div>Libero.</div></td>
<td><div>Iste.</div></td>
<td><div>Dicta?</div></td>
</tr>
<tr>
<td><div>Consequatur!</div></td>
<td><div>Nobis.</div></td>
<td><div>Aperiam!</div></td>
<td><div>Odio.</div></td>
<td><div>Nemo!</div></td>
</tr>
<tr>
<td><div>Dolorem.</div></td>
<td><div>Distinctio?</div></td>
<td><div>Provident?</div></td>
<td><div>Nisi!</div></td>
<td><div>Impedit?</div></td>
</tr>
<tr>
<td><div>Accusantium?</div></td>
<td><div>Ea.</div></td>
<td><div>Doloribus.</div></td>
<td><div>Nobis.</div></td>
<td><div>Maxime?</div></td>
</tr>
<tr>
<td><div>Molestiae.</div></td>
<td><div>Rem?</div></td>
<td><div>Enim!</div></td>
<td><div>Maxime?</div></td>
<td><div>Reiciendis!</div></td>
</tr>
<tr>
<td><div>Commodi.</div></td>
<td><div>At.</div></td>
<td><div>Earum?</div></td>
<td><div>Fugit.</div></td>
<td><div>Maxime?</div></td>
</tr>
<tr>
<td><div>Eligendi?</div></td>
<td><div>Quis.</div></td>
<td><div>Error?</div></td>
<td><div>Atque.</div></td>
<td><div>Perferendis.</div></td>
</tr>
<tr>
<td><div>Quidem.</div></td>
<td><div>Odit!</div></td>
<td><div>Tempore.</div></td>
<td><div>Voluptates.</div></td>
<td><div>Facere!</div></td>
</tr>
<tr>
<td><div>Repudiandae!</div></td>
<td><div>Accusamus?</div></td>
<td><div>Soluta.</div></td>
<td><div>Incidunt.</div></td>
<td><div>Aliquid?</div></td>
</tr>
<tr>
<td><div>Quisquam?</div></td>
<td><div>Eius.</div></td>
<td><div>Obcaecati?</div></td>
<td><div>Maxime.</div></td>
<td><div>Nihil.</div></td>
</tr>
<tr>
<td><div>Minus.</div></td>
<td><div>Magni?</div></td>
<td><div>Necessitatibus?</div></td>
<td><div>Asperiores.</div></td>
<td><div>Iure.</div></td>
</tr>
<tr>
<td><div>Ipsa!</div></td>
<td><div>Temporibus.</div></td>
<td><div>Non!</div></td>
<td><div>Dolore.</div></td>
<td><div>Veritatis.</div></td>
</tr>
<tr>
<td><div>Ea!</div></td>
<td><div>Officia?</div></td>
<td><div>Doloribus?</div></td>
<td><div>Deleniti?</div></td>
<td><div>Dolorem!</div></td>
</tr>
<tr>
<td><div>Sequi?</div></td>
<td><div>Molestias!</div></td>
<td><div>Nesciunt.</div></td>
<td><div>Qui.</div></td>
<td><div>Doloribus?</div></td>
</tr>
<tr>
<td><div>Id.</div></td>
<td><div>Enim?</div></td>
<td><div>Quam!</div></td>
<td><div>Sunt!</div></td>
<td><div>Consequuntur.</div></td>
</tr>
<tr>
<td><div>Reprehenderit?</div></td>
<td><div>Ut?</div></td>
<td><div>Veritatis!</div></td>
<td><div>Corporis!</div></td>
<td><div>Ipsa.</div></td>
</tr>
<tr>
<td><div>Blanditiis!</div></td>
<td><div>Veniam!</div></td>
<td><div>Tenetur.</div></td>
<td><div>Eos?</div></td>
<td><div>Repellat!</div></td>
</tr>
<tr>
<td><div>Enim?</div></td>
<td><div>Atque!</div></td>
<td><div>Aspernatur?</div></td>
<td><div>Fugit.</div></td>
<td><div>Voluptatibus!</div></td>
</tr>
<tr>
<td><div>Nihil.</div></td>
<td><div>Distinctio!</div></td>
<td><div>Aut!</div></td>
<td><div>Rerum!</div></td>
<td><div>Dolorem?</div></td>
</tr>
<tr>
<td><div>Inventore!</div></td>
<td><div>Hic.</div></td>
<td><div>Explicabo.</div></td>
<td><div>Sit.</div></td>
<td><div>A.</div></td>
</tr>
<tr>
<td><div>Inventore.</div></td>
<td><div>A.</div></td>
<td><div>Nam.</div></td>
<td><div>Beatae.</div></td>
<td><div>Consequatur.</div></td>
</tr>
<tr>
<td><div>Eligendi.</div></td>
<td><div>Illum.</div></td>
<td><div>Enim?</div></td>
<td><div>Dignissimos!</div></td>
<td><div>Ducimus?</div></td>
</tr>
<tr>
<td><div>Eligendi!</div></td>
<td><div>Fugiat?</div></td>
<td><div>Deleniti!</div></td>
<td><div>Rerum?</div></td>
<td><div>Delectus?</div></td>
</tr>
<tr>
<td><div>Sit.</div></td>
<td><div>Nam.</div></td>
<td><div>Eveniet?</div></td>
<td><div>Veritatis.</div></td>
<td><div>Adipisci!</div></td>
</tr>
<tr>
<td><div>Nostrum?</div></td>
<td><div>Totam?</div></td>
<td><div>Voluptates!</div></td>
<td><div>Ab!</div></td>
<td><div>Consequatur.</div></td>
</tr>
<tr>
<td><div>Error!</div></td>
<td><div>Dicta?</div></td>
<td><div>Voluptatum?</div></td>
<td><div>Corporis!</div></td>
<td><div>Ea.</div></td>
</tr>
<tr>
<td><div>Vel.</div></td>
<td><div>Asperiores.</div></td>
<td><div>Facere.</div></td>
<td><div>Quae.</div></td>
<td><div>Fugiat.</div></td>
</tr>
<tr>
<td><div>Libero?</div></td>
<td><div>Molestias.</div></td>
<td><div>Praesentium!</div></td>
<td><div>Accusantium!</div></td>
<td><div>Tenetur.</div></td>
</tr>
<tr>
<td><div>Eveniet.</div></td>
<td><div>Quam.</div></td>
<td><div>Quibusdam.</div></td>
<td><div>Eaque?</div></td>
<td><div>Dolore!</div></td>
</tr>
<tr>
<td><div>Asperiores.</div></td>
<td><div>Impedit.</div></td>
<td><div>Ullam?</div></td>
<td><div>Quod.</div></td>
<td><div>Placeat.</div></td>
</tr>
<tr>
<td><div>In?</div></td>
<td><div>Aliquid.</div></td>
<td><div>Voluptatum!</div></td>
<td><div>Omnis?</div></td>
<td><div>Magni.</div></td>
</tr>
<tr>
<td><div>Autem.</div></td>
<td><div>Earum!</div></td>
<td><div>Debitis!</div></td>
<td><div>Eius.</div></td>
<td><div>Incidunt.</div></td>
</tr>
<tr>
<td><div>Blanditiis?</div></td>
<td><div>Impedit.</div></td>
<td><div>Libero?</div></td>
<td><div>Reiciendis!</div></td>
<td><div>Tempore.</div></td>
</tr>
<tr>
<td><div>Quasi.</div></td>
<td><div>Reiciendis.</div></td>
<td><div>Aut?</div></td>
<td><div>Architecto?</div></td>
<td><div>Vero!</div></td>
</tr>
<tr>
<td><div>Fuga!</div></td>
<td><div>Illum!</div></td>
<td><div>Tenetur!</div></td>
<td><div>Vitae.</div></td>
<td><div>Natus.</div></td>
</tr>
<tr>
<td><div>Dolorem?</div></td>
<td><div>Eaque!</div></td>
<td><div>Vero?</div></td>
<td><div>Quibusdam.</div></td>
<td><div>Deleniti?</div></td>
</tr>
<tr>
<td><div>Minus.</div></td>
<td><div>Accusantium?</div></td>
<td><div>Ab.</div></td>
<td><div>Cupiditate.</div></td>
<td><div>Atque?</div></td>
</tr>
<tr>
<td><div>Hic.</div></td>
<td><div>Eligendi.</div></td>
<td><div>Sit?</div></td>
<td><div>Nihil.</div></td>
<td><div>Dolor.</div></td>
</tr>
<tr>
<td><div>Quidem.</div></td>
<td><div>In?</div></td>
<td><div>Nesciunt?</div></td>
<td><div>Adipisci.</div></td>
<td><div>Neque.</div></td>
</tr>
<tr>
<td><div>Eos.</div></td>
<td><div>Incidunt!</div></td>
<td><div>Quis?</div></td>
<td><div>Quod?</div></td>
<td><div>Vitae!</div></td>
</tr>
<tr>
<td><div>Ullam!</div></td>
<td><div>Facilis.</div></td>
<td><div>Tempora!</div></td>
<td><div>Accusantium.</div></td>
<td><div>Consequuntur?</div></td>
</tr>
<tr>
<td><div>Numquam?</div></td>
<td><div>At.</div></td>
<td><div>Incidunt.</div></td>
<td><div>Tenetur?</div></td>
<td><div>Voluptatem.</div></td>
</tr>
<tr>
<td><div>Iusto?</div></td>
<td><div>Inventore.</div></td>
<td><div>Molestias.</div></td>
<td><div>Accusantium.</div></td>
<td><div>Sunt.</div></td>
</tr>
<tr>
<td><div>Repellendus!</div></td>
<td><div>Ex.</div></td>
<td><div>Magnam.</div></td>
<td><div>Odit!</div></td>
<td><div>Iste?</div></td>
</tr>
<tr>
<td><div>Id!</div></td>
<td><div>Reiciendis?</div></td>
<td><div>Rem.</div></td>
<td><div>Quae!</div></td>
<td><div>Laborum?</div></td>
</tr>
<tr>
<td><div>Exercitationem?</div></td>
<td><div>Maiores.</div></td>
<td><div>Minima.</div></td>
<td><div>Nemo!</div></td>
<td><div>Sequi.</div></td>
</tr>
<tr>
<td><div>Qui.</div></td>
<td><div>Impedit?</div></td>
<td><div>Reprehenderit.</div></td>
<td><div>Distinctio.</div></td>
<td><div>Natus?</div></td>
</tr>
<tr>
<td><div>Suscipit!</div></td>
<td><div>Tenetur.</div></td>
<td><div>Cumque!</div></td>
<td><div>Molestiae.</div></td>
<td><div>Fugiat?</div></td>
</tr>
<tr>
<td><div>Sunt?</div></td>
<td><div>Quis?</div></td>
<td><div>Officia.</div></td>
<td><div>Incidunt.</div></td>
<td><div>Voluptate.</div></td>
</tr>
<tr>
<td><div>Possimus.</div></td>
<td><div>Mollitia!</div></td>
<td><div>Eveniet!</div></td>
<td><div>Temporibus.</div></td>
<td><div>Mollitia!</div></td>
</tr>
<tr>
<td><div>Incidunt.</div></td>
<td><div>Fugiat.</div></td>
<td><div>Error.</div></td>
<td><div>Odit.</div></td>
<td><div>Cumque?</div></td>
</tr>
<tr>
<td><div>Maxime?</div></td>
<td><div>Qui!</div></td>
<td><div>Sapiente!</div></td>
<td><div>Natus.</div></td>
<td><div>Soluta?</div></td>
</tr>
</tbody>
</table>
</body>Upvotes: 0
cr45h
Reputation: 1
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>
Upvotes: 0
Richard
Reputation: 1038
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>
Upvotes: 1
Max Voisard
Reputation: 1942
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/
Upvotes: 3
Related Questions
- Table with fixed header and fixed column on pure css
- Fixed header in HTML Table
- Fixed Header & Fixed Column Table
- HTML Table with multiple rows header fixed and columns fixed
- TH not working in Table fixed header
- Table fixed header and first column css/html
- Align columns on table with fixed header
- Html table with fixed header column and row without JS
- Html table with fixed header and fixed column both
- Dynamic HTML Table with Fixed Header and Fixed First column