是否可以在没有 javascript 的情况下在容器后面剪辑绝对表头？

debugcn 发表于 Dev

马特·斯平克斯

我试图在我的表中实现粘性标题。在下面的示例中，是否可以在不添加更多 javascript 的情况下剪辑容器后面的标题？

$(document).ready(function() {
  $('.grid-body').scroll(function(e) {
    $('thead').css("left", -$(".grid-body").scrollLeft() + 8);
  });
});

.container {
  background-color:#ffcccc;
  width:150px;
}
.grid-header {
  width:100%;
  overflow:hidden;
}
.grid-body {
  height:200px;
  overflow:auto;
}
table {
  border-collapse: collapse;
}
td, th {
  width: 100px;
  min-width: 100px;
  background-color: #e0e0e0;
}
thead {
  background-color:#ccffcc;
  position:absolute;
}
tbody {
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="grid-header">
      <table id="callLogExplorer">
        <thead>
          <tr>
            <th>head1</th>
            <th>head2</th>
            <th>head3</th>
          </tr>
        </thead>
      </table>
    </div>
    <div class="grid-body">
      <table>
        <tbody>
          <tr>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
          </tr>
          <tr>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
          </tr>
          <tr>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
          </tr>
          <tr>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
          </tr>
          <tr>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
          </tr>
          <tr>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
          </tr>
          <tr>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
          </tr>
          <tr>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
          </tr>
          <tr>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
          </tr>
          <tr>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
          </tr>
          <tr>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
          </tr>
          <tr>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
            <td>asdfasd fas</td>
          </tr>
        </tbody>
      </table>
    </div>

  </div>

斯文

只需将position: relative和添加overflow: hidden到您的容器 div，就您而言，.container并删除您在 JavaScript 中添加的八个像素。

$(document).ready(function() {
  $('.grid-body').scroll(function(e) {
    $('thead').css("left", -$(".grid-body").scrollLeft());
  });
});

.container {
  position: relative;
  background-color: #ffcccc;
  width: 150px;
  overflow: hidden;
}

.grid-header {
  width: 100%;
}

.grid-body {
  height: 200px;
  overflow: auto;
}

table {
  border-collapse: collapse;
}

td,
th {
  width: 100px;
  min-width: 100px;
  background-color: #e0e0e0;
}

thead {
  background-color: #ccffcc;
  position: absolute;
}

tbody {}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="grid-header">
    <table id="callLogExplorer">
      <thead>
        <tr>
          <th>head1</th>
          <th>head2</th>
          <th>head3</th>
        </tr>
      </thead>
    </table>
  </div>
  <div class="grid-body">
    <table>
      <tbody>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
      </tbody>
    </table>
  </div>

</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。