Fixed table header
How do I make an fixed table header?
A testcase to fix the multi-row header of a table and still see all the data rows of the body.. What is a fixed table header? How do you make a fixed table header? This script and codes were developed by Dirk Drijkoningen on 19 January 2023, Thursday.
Fixed table header - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fixed table header</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdn.datatables.net/buttons/1.2.2/css/buttons.bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container">
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%"> <thead> <tr> <th>Order number</th> <th>Description</th> <th>Deadline</th> <th>Status</th> <th>Amount</th> </tr> <tr> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Alphabet puzzle</td> <td>2016/01/15</td> <td>Done</td> <td data-order="1000">€1.000,00</td> </tr> <tr> <td>2</td> <td>Layout for poster</td> <td>2016/01/31</td> <td>Planned</td> <td data-order="1834">€1.834,00</td> </tr> <tr> <td>3</td> <td>Image creation</td> <td>2016/01/23</td> <td>To Do</td> <td data-order="1500">€1.500,00</td> </tr> <tr> <td>4</td> <td>Create font</td> <td>2016/02/26</td> <td>Done</td> <td data-order="1200">€1.200,00</td> </tr> <tr> <td>5</td> <td>Sticker production</td> <td>2016/02/18</td> <td>Planned</td> <td data-order="2100">€2.100,00</td> </tr> <tr> <td>6</td> <td>Glossy poster</td> <td>2016/03/17</td> <td>To Do</td> <td data-order="899">€899,00</td> </tr> <tr> <td>7</td> <td>Beer label</td> <td>2016/05/28</td> <td>Confirmed</td> <td data-order="2499">€2.499,00</td> </tr> <tr> <td>8</td> <td>Shop sign</td> <td>2016/04/19</td> <td>Offer</td> <td data-order="1099">€1.099,00</td> </tr> <tr> <td>9</td> <td>X-Mas decoration</td> <td>2016/10/31</td> <td>Confirmed</td> <td data-order="1750">€1.750,00</td> </tr> <tr> <td>10</td> <td>Halloween invite</td> <td>2016/09/12</td> <td>Planned</td> <td data-order="400">€400,00</td> </tr> <tr> <td>11</td> <td>Wedding announcement</td> <td>2016/07/09</td> <td>To Do</td> <td data-order="299">€299,00</td> </tr> <tr> <td>12</td> <td>Member pasport</td> <td>2016/06/22</td> <td>Offer</td> <td data-order="149">€149,00</td> </tr> <tr> <td>13</td> <td>Drink tickets</td> <td>2016/11/01</td> <td>Confirmed</td> <td data-order="199">€199,00</td> </tr> <tr> <td>14</td> <td>Album cover</td> <td>2017/03/15</td> <td>To Do</td> <td data-order="4999">€4.999,00</td> </tr> <tr> <td>15</td> <td>Shipment box</td> <td>2017/02/08</td> <td>Offer</td> <td data-order="1399">€1.399,00</td> </tr> <tr> <td>16</td> <td>Wooden puzzle</td> <td>2017/01/11</td> <td>Done</td> <td data-order="1000">€1.000,00</td> </tr> <tr> <td>17</td> <td>Fashion Layout</td> <td>2016/01/30</td> <td>Planned</td> <td data-order="1834">€1.834,00</td> </tr> <tr> <td>18</td> <td>Toy creation</td> <td>2016/01/10</td> <td>To Do</td> <td data-order="1550">€1.550,00</td> </tr> <tr> <td>19</td> <td>Create stamps</td> <td>2016/02/26</td> <td>Done</td> <td data-order="1220">€1.220,00</td> </tr> <tr> <td>20</td> <td>Sticker design</td> <td>2017/02/18</td> <td>Planned</td> <td data-order="2100">€2.100,00</td> </tr> <tr> <td>21</td> <td>Poster rock concert</td> <td>2017/04/17</td> <td>To Do</td> <td data-order="899">€899,00</td> </tr> <tr> <td>22</td> <td>Wine label</td> <td>2017/05/28</td> <td>Confirmed</td> <td data-order="2799">€2.799,00</td> </tr> <tr> <td>23</td> <td>Shopping bag</td> <td>2017/04/19</td> <td>Offer</td> <td data-order="1299">€1.299,00</td> </tr> <tr> <td>24</td> <td>Decoration for Easter</td> <td>2017/10/31</td> <td>Confirmed</td> <td data-order="1650">€1.650,00</td> </tr> <tr> <td>25</td> <td>Saint Nicolas colorbook</td> <td>2017/09/12</td> <td>Planned</td> <td data-order="510">€510,00</td> </tr> <tr> <td>26</td> <td>Wedding invites</td> <td>2017/07/09</td> <td>To Do</td> <td data-order="399">€399,00</td> </tr> <tr> <td>27</td> <td>Member pasport</td> <td>2017/06/22</td> <td>Offer</td> <td data-order="249">€249,00</td> </tr> <tr> <td>28</td> <td>Drink tickets</td> <td>2017/11/01</td> <td>Confirmed</td> <td data-order="199">€199,00</td> </tr> <tr> <td>29</td> <td>Blue-Ray cover</td> <td>2018/03/15</td> <td>To Do</td> <td data-order="1999">€1.999,00</td> </tr> <tr> <td>30</td> <td>TV carton</td> <td>2019/02/08</td> <td>Offer</td> <td data-order="1369">€1.369,00</td> </tr> </tbody>
</table>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js'></script>
<script src='https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js'></script>
<script src='https://cdn.datatables.net/buttons/1.2.2/js/buttons.colVis.min.js'></script>
<script src='https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js'></script>
<script src='https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js'></script>
<script src='https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js'></script>
<script src='https://cdn.datatables.net/buttons/1.2.2/js/buttons.bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js'></script>
<script src='https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js'></script>
<script src='https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Fixed table header - Script Codes CSS Codes
thead{ position: fixed; background-color: #428bca; color:#FFF;
}
Fixed table header - Script Codes JS Codes
$(document).ready(function() { var thHeight = $('#example thead tr:nth-child(1)').height(); var count = $('#example thead').children('tr').length; $('#example tbody tr:nth-child(3) td').each(function(idx){ var dWidth = $(this).width()+18; var tdChild = idx+1; $('#example thead th:nth-child('+tdChild+')').css('width', dWidth+'px'); }); $('#example tbody tr:nth-child(1)').css('border-top', thHeight*count+18+'px solid transparent');
});
Developer | Dirk Drijkoningen |
Username | RedJokingInn |
Uploaded | January 19, 2023 |
Rating | 3 |
Size | 2,995 Kb |
Views | 6,072 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
DataTables conditional row styling | 3,136 Kb |
Visualize Array Methods | 2,809 Kb |
DataTables custom PDF | 6,267 Kb |
Maanden en dagen | 1,383 Kb |
Horizontal rule decorations | 1,874 Kb |
DataTables percentage bar renderer plugin v1.1 | 3,513 Kb |
Anim tansform | 2,354 Kb |
Calculating column totals with DataTables | 2,553 Kb |
Bootstrap Dynamic Modal | 3,216 Kb |
Testballon2 | 2,432 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Revolving Text Landing Page Trial | TimRuby | 2,976 Kb |
Vue Transition | Chenming142 | 4,561 Kb |
Save for later... | Victorfreire | 1,359 Kb |
A Pen by Miro Olma | Programiro | 2,342 Kb |
CSS3 Snow Animation | NickyCDK | 1,695 Kb |
Drifting Clouds | Benedikte | 2,247 Kb |
A simple log in form made with css | Mayurelbhar | 2,160 Kb |
Click handler test | Snapson | 2,329 Kb |
SlideDown FixedMenu | Mp_graphic | 5,602 Kb |
Simple CSS loader. | Cabrera | 2,574 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!