javascript - Align Table Header and Table Body from Two Different Tables -
hi
using table header , table body 2 different tables create scrollable table fixed header. can found jfiddle link.
but cell width header , body varies how align columns together? want header , body column have same width.
my table presented below.
below header file codes
<!doctype html> <html> <head> <title>title of document</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="layout.css"> <script src="jquery-1.11.3.min.js"></script> <script type='text/javascript' src='scroll.js'></script> </head> <body> <header> <a href="/datacentre/admin/index.php" title="return homepage" id="logo"> <img src="/datacentre/images/cagd_logo.jpg" alt="cagd logo" style="width:30px;height:30px;"/> </a> <span class="headerspan">cagd data centre</span> <a href="/datacentre/webhelp/index.htm" title="return homepage" id="helpfile"> </a> </header> <nav> </nav>below html code index.php
<?php include('/header.php'); ?> <body> <header> </header> <section id="content"> <div class="outer-container"> <div class="inner-container"> <div class="table-header"> <table id="headertable"> <table> <thead> <tr> <th class="header-cell col1">one</th> <th class="header-cell col2">two</th> <th class="header-cell col3">three</th> <th class="header-cell col4">four</th> <th class="header-cell col5">five</th> </tr> </thead> </table> </div> <div class="table-body"> <table id="bodytable"> <tbody> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> <tr> <td class="body-cell col1">body row1</td> <td class="body-cell col2">body row2</td> <td class="body-cell col3">body row2</td> <td class="body-cell col4">body row2</td> <td class="body-cell col5">body row2 en nog meer</td> </tr> </tbody> </table> </div> </div> </div> </section> </body> </html>below css code.
* { padding: 0; margin: 0; } body { height: 100%; width: 100%; } table { border-collapse: collapse; } .outer-container { background-color: #ccc; position: absolute; top: 10em; left: 10em; right: 200em; bottom: 40em; height:450px; width:700px; } .inner-container { height: 100%; overflow: hidden; position:relative; } .table-header { position: relative; } .table-body { overflow: auto; } .header-cell { background-color: yellow; text-align: left; height: 40px; } .body-cell { background-color: blue; text-align: left; } .col1, .col3, .col4, .col5 { width: 120px; min-width: 120px; } .col2 { min-width: 300px; }below javascript code scroll.js.
function settablebody() { $(".table-body").height( $(".inner-container").height() - $(".table-header").height()); } $(document).ready(function () { var marginleft = $(".outer-container").position().left; //create var , calculate difference left settablebody(); $(window).resize(settablebody); $(".table-body").scroll(function () { $(".table-header").offset({ left: marginleft - this.scrollleft //minus difference while table header scroll table body }); }); });
Comments
Post a Comment