保持表格标题可见而不在表格正文

时间:2018-05-01 10:32:28

标签: javascript html css

我正在制作一个带有表格数据的页面,可以使用主页面滚动条滚动,但保持表格标题可见。页面顶部有一个页眉,页面底部有一个分页区域。

我在这里尝试了一下。



var dataHeader = document.querySelector('.data thead');

var scrollValue = 50;

window.onscroll = function () {
    if (document.body.scrollTop > scrollValue || document.documentElement.scrollTop > scrollValue) {
        dataHeader.className = "fixed";
    } else {
        dataHeader.className = "";
    }
};

.main {
  position: relative;
  top: 0;
  width: 700px;
  margin: 0 auto;
}
.header {
  position: fixed;
  top: 0;
  background-color: #abc;
  width: 700px;
  z-index: 10;
}

.content {
  position: relative;
  top: 60px;
  background: #cfe;
}

.content-header {
  color: blue;
  padding-top: 10px;
}

.data {
  position: relative;
  margin-bottom: 18px;
}

.data table {
  border-collapse: collapse;
  width: 700px;
}

.data thead {
  background: grey;
  width: 700px;
  display: table-header-group;
}

.data tbody {
  width: 700px;
}

.data thead.fixed {
  position: fixed;
  top: 80px;
}

.data thead.fixed th {
  width: 90px;
}

.paging {
  position: absolute;
  bottom: 0;
  background-color: black;
  color: white;
  width: 700px;
}

.column {
  padding: 2;
  width: 80px;
}

<div class="main">

  <div class="header">
    <h1>Super Page</h1>
  </div>

  <div class="content">

    <div class="content-header">
      <h2>Beautiful Content</h2>
    </div>

    <div class="data">
      <table>
        <colgroup>
          <col class="column">
          <col class="column">
          <col class="column">
        </colgroup>
        <thead>
          <tr>
            <th class="column">Sr</th>
            <th class="column">City</th>
            <th class="column">Country</th>
          </tr>
          <thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>Amsterdam</td>
                <td>Netherlands</td>
              </tr>
              <tr>
                <td>2</td>
                <td>Lahore</td>
                <td>Pakistan</td>
              </tr>
              <tr>
                <td>3</td>
                <td>Doha</td>
                <td>Qatar</td>
              </tr>
              <tr>
                <td>4</td>
                <td>Mumbai</td>
                <td>India</td>
              </tr>
              <tr>
                <td>5</td>
                <td>Rotterdam</td>
                <td>Netherlands</td>
              </tr>
              <tr>
                <td>6</td>
                <td>Amsterdam</td>
                <td>Netherlands</td>
              </tr>
              <tr>
                <td>7</td>
                <td>Lahore</td>
                <td>Pakistan</td>
              </tr>
              <tr>
                <td>8</td>
                <td>Doha</td>
                <td>Qatar</td>
              </tr>
              <tr>
                <td>9</td>
                <td>Mumbai</td>
                <td>India</td>
              </tr>
              <tr>
                <td>10</td>
                <td>Rotterdam</td>
                <td>Netherlands</td>
              </tr>
              <tr>
                <td>11</td>
                <td>Amsterdam</td>
                <td>Netherlands</td>
              </tr>
              <tr>
                <td>12</td>
                <td>Lahore</td>
                <td>Pakistan</td>
              </tr>
              <tr>
                <td>13</td>
                <td>Doha</td>
                <td>Qatar</td>
              </tr>
              <tr>
                <td>14</td>
                <td>Mumbai</td>
                <td>India</td>
              </tr>
              <tr>
                <td>15</td>
                <td>Rotterdam</td>
                <td>Netherlands</td>
              </tr>
              <tr>
                <td>16</td>
                <td>Amsterdam</td>
                <td>Netherlands</td>
              </tr>
              <tr>
                <td>17</td>
                <td>Lahore</td>
                <td>Pakistan</td>
              </tr>
              <tr>
                <td>18</td>
                <td>Doha</td>
                <td>Qatar</td>
              </tr>
              <tr>
                <td>19</td>
                <td>Mumbai</td>
                <td>India</td>
              </tr>
              <tr>
                <td>20</td>
                <td>Rotterdam</td>
                <td>Netherlands</td>
              </tr>
              <tr>
                <td>21</td>
                <td>Prague</td>
                <td>Czech Republic</td>
              </tr>
            </tbody>
      </table>
    </div>
    <!-- /.data -->

    <div class="paging">
      Displaying 10 of 100 records
    </div>
  </div>
  <!-- /.content -->

</div>
<!-- /.main -->
&#13;
&#13;
&#13;

唯一的问题是当我向下滚动时,表格标题类型的折叠并且不会与表格主体的列保持对齐。我该如何解决?

1 个答案:

答案 0 :(得分:2)

您可以将.data thead.fixed th规则调整为width: calc(700px/3);,如下所示:

var dataHeader = document.querySelector('.data thead');

var scrollValue = 50;

window.onscroll = function () {
    if (document.body.scrollTop > scrollValue || document.documentElement.scrollTop > scrollValue) {
        dataHeader.className = "fixed";
    } else {
        dataHeader.className = "";
    }
};
.main {
  position: relative;
  top: 0;
  width: 700px;
  margin: 0 auto;
}
.header {
  position: fixed;
  top: 0;
  background-color: #abc;
  width: 700px;
  z-index: 10;
}

.content {
  position: relative;
  top: 60px;
  background: #cfe;
}

.content-header {
  color: blue;
  padding-top: 10px;
}

.data {
  position: relative;
  margin-bottom: 18px;
}

.data table {
  border-collapse: collapse;
  width: 700px;
}

.data thead {
  background: grey;
  width: 700px;
  display: table-header-group;
}

.data tbody {
  width: 700px;
}

.data thead.fixed {
  position: fixed;
  top: 80px;
}

.data thead.fixed th {
  width: calc(700px/3);  
}

.paging {
  position: absolute;
  bottom: 0;
  background-color: black;
  color: white;
  width: 700px;
}

.column {
  padding: 2;
  width: 80px;
<div class="main">

  <div class="header">
    <h1>Super Page</h1>
  </div>

  <div class="content">

    <div class="content-header">
      <h2>Beautiful Content</h2>
    </div>

    <div class="data">
      <table>
        <colgroup>
          <col class="column">
          <col class="column">
          <col class="column">
        </colgroup>
        <thead>
          <tr>
            <th class="column">Sr</th>
            <th class="column">City</th>
            <th class="column">Country</th>
          </tr>
          <thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>Amsterdam</td>
                <td>Netherlands</td>
              </tr>
              <tr>
                <td>2</td>
                <td>Lahore</td>
                <td>Pakistan</td>
              </tr>
              <tr>
                <td>3</td>
                <td>Doha</td>
                <td>Qatar</td>
              </tr>
              <tr>
                <td>4</td>
                <td>Mumbai</td>
                <td>India</td>
              </tr>
              <tr>
                <td>5</td>
                <td>Rotterdam</td>
                <td>Netherlands</td>
              </tr>
              <tr>
                <td>6</td>
                <td>Amsterdam</td>
                <td>Netherlands</td>
              </tr>
              <tr>
                <td>7</td>
                <td>Lahore</td>
                <td>Pakistan</td>
              </tr>
              <tr>
                <td>8</td>
                <td>Doha</td>
                <td>Qatar</td>
              </tr>
              <tr>
                <td>9</td>
                <td>Mumbai</td>
                <td>India</td>
              </tr>
              <tr>
                <td>10</td>
                <td>Rotterdam</td>
                <td>Netherlands</td>
              </tr>
              <tr>
                <td>11</td>
                <td>Amsterdam</td>
                <td>Netherlands</td>
              </tr>
              <tr>
                <td>12</td>
                <td>Lahore</td>
                <td>Pakistan</td>
              </tr>
              <tr>
                <td>13</td>
                <td>Doha</td>
                <td>Qatar</td>
              </tr>
              <tr>
                <td>14</td>
                <td>Mumbai</td>
                <td>India</td>
              </tr>
              <tr>
                <td>15</td>
                <td>Rotterdam</td>
                <td>Netherlands</td>
              </tr>
              <tr>
                <td>16</td>
                <td>Amsterdam</td>
                <td>Netherlands</td>
              </tr>
              <tr>
                <td>17</td>
                <td>Lahore</td>
                <td>Pakistan</td>
              </tr>
              <tr>
                <td>18</td>
                <td>Doha</td>
                <td>Qatar</td>
              </tr>
              <tr>
                <td>19</td>
                <td>Mumbai</td>
                <td>India</td>
              </tr>
              <tr>
                <td>20</td>
                <td>Rotterdam</td>
                <td>Netherlands</td>
              </tr>
              <tr>
                <td>21</td>
                <td>Prague</td>
                <td>Czech Republic</td>
              </tr>
            </tbody>
      </table>
    </div>
    <!-- /.data -->

    <div class="paging">
      Displaying 10 of 100 records
    </div>
  </div>
  <!-- /.content -->

</div>
<!-- /.main -->