Jfiddle HTML滚动表示例不会水平滚动

时间：2015-09-28 14:58:15

标签： javascript php jquery html css

尝试使用此jfiddle链接中固定标题的html表格。
 从该站点，该表将具有垂直和水平滚动。
示例表如下所示。 enter image description here

当我运行代码时，我得到下表。 enter image description here

我的练习代码在

下面呈现

以下是index.php文件的代码

$(document).ready(function() {
  setTableBody();
  $(window).resize(setTableBody);
  $(".table-body").scroll(function() {
    $(".table-header").offset({
      left: -1 * this.scrollLeft
    });
  });
});

function setTableBody() {
  $(".table-body").height($(".inner-container").height() - $(".table-header").height());
}

以下是javascript / JQuery scroll.js代码

* {
  padding: 0;
  margin: 0;
}
body {
  height: 100%;
  width: 100%;
}
table {
  border-collapse: collapse;
}
.outer-container {
  background-color: #ccc;
  position: absolute;
  top: 0;
  left: 0;
  right: 300px;
  bottom: 40px;
}
.inner-container {
  height: 100%;
  overflow: hidden;
}
.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;
}

以下是CSS代码

nextWord

我的问题是该表不会像jfiddle页面那样水平滚动。控制台中没有错误。

1 个答案:

答案 0 :(得分：0)

检查以下内容，

它按预期工作

＆＃13;
＆＃13; 
$(document).ready(function() {
  setTableBody();
  $(window).resize(setTableBody);
  $(".table-body").scroll(function() {
    $(".table-header").offset({
      left: -1 * this.scrollLeft
    });
  });
});

function setTableBody() {
  $(".table-body").height($(".inner-container").height() - $(".table-header").height());
}
＆＃13; 
* {
  padding: 0;
  margin: 0;
}
body {
  height: 100%;
  width: 100%;
}
table {
  border-collapse: collapse;
}
.outer-container {
  background-color: #ccc;
  position: absolute;
  top: 0;
  left: 0;
  right: 300px;
  bottom: 40px;
}
.inner-container {
  height: 100%;
  overflow: hidden;
}
.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; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!DOCTYPE html>

<html>

<head>
  <title>Title of the document</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="jquery-1.11.3.min.js"></script>
  <script type='text/javascript' src='scroll.js'></script>

</head>

<body>

  <header>

  </header>


  <div class="outer-container">
    <div class="inner-container">
      <div class="table-header">
        <table id="headertable">
          <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>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题