1

Hi all
am using a table header and a table body from two different tables to create a scrollable table with a fixed header. This can be found from this jfiddle link.

But the cell width for the header and body varies so how do I align the columns together? I really want header and body column to have the same width.

my table is presented below.

enter image description here

Below is the header file codes

<!DOCTYPE html>

<html>
<head>
<title>Title of the 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 to the 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 to the homepage" id="helpfile">
  help
</a>

</header>
    
 <nav>  </nav>

Below is the 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 is the 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 is the 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 and calculate the difference from left
    setTableBody();
    $(window).resize(setTableBody);
    $(".table-body").scroll(function () {
        $(".table-header").offset({
            left: marginLeft - this.scrollLeft //minus the difference while table header scroll with table body
        });
    });
});
faisal abdulai
  • 3,739
  • 8
  • 44
  • 66
  • My recommendation would be either one, DON'T have the header and body in 2 different tables, or two, set the td class of all column 1 to one, column 2 to two, column 3 to three, and so on. Then in css, set different widths to the different classes. – frosty Oct 10 '15 at 02:30
  • You're using a wrong way to structure your table. The header and the other rows should be in the same table. – Ionut Necula Nov 17 '15 at 09:23
  • I think you should take a look at [this](http://stackoverflow.com/a/17380697/1336174) answer. The scrollable body of the table is what you are looking for. – Douwe de Haan Dec 17 '15 at 10:04

0 Answers0