从两个不同的表中对齐表头和表体

时间：2015-10-10 02:00:33

标签： javascript php jquery html css

大家好，我正在使用来自两个不同表的表头和表体来创建一个带有固定标题的可滚动表。这可以从jfiddle链接中找到。

但是标题和正文的单元格宽度会有所不同，所以如何将列对齐？我真的希望标题和正文列具有相同的宽度。

我的表格如下所示。

enter image description here

以下是头文件代码

＆＃13;
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

下面是html代码index.php

＆＃13;
＆＃13; 
<?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>
＆＃13;
＆＃13;
＆＃13;

以下是CSS代码。

＆＃13;
＆＃13; 
* {
    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;
}
＆＃13;
＆＃13;
＆＃13;

以下是javascript代码scroll.js。

＆＃13;
＆＃13; 
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
        });
    });
});
＆＃13;
＆＃13;
＆＃13;

0 个答案:

没有答案
相关问题
最新问题