0

所以我有一个使用 position:fixed 在样式表中实现的表头。我希望能够让这个标题被它周围的 div 剪裁，但是当它的宽度大于周围 div 的宽度时，设置溢出不会导致它被剪裁。有任何想法吗？

基本代码是：

th {
  box-sizing: border-box;
  height: 46px;
}
<body>
  <div style="overflow: hidden; border: 5px solid black;width: 20%; height: 50%;">
    <table style="width: 1396px; position:fixed">
      <thead>
        <tr>
          <th style="width: 146px;">Name</th>
          <th style="width: 129px;">Company</th>
          <th style="width: 116px;">Address</th>
          <th style="width: 135px;">Spouse</th>
          <th style="width: 141px;">SSN</th>
        </tr>
      </thead>
    </table>
  </div>
</body>

我在想也许可以将剪辑属性应用于表格，然后用 JS 调整它，但无论我尝试放置什么剪辑，表格都会消失。我一直在使用 position:absolute ，然后在滚动时使用 javascript 动态调整它，但是即使它确实从其父 div 的表格上得到了正确的剪辑，它看起来也很滞后。

有任何想法吗？

4

1 回答 1

1

固定和绝对定位的元素在页面流之外（你可能会说在更高的层上），并且不受页面上其他元素的影响。

在您的内容周围放置一个固定的包装 div，作为固定宽度的容器。

http://jsfiddle.net/e9vAA

.page {
  width: 400px;
  margin: 0 auto;
}

.fixed {
  position: fixed;
  width: 400px;
  height: 80px;
  background-color: #eee;
}

th {
  box-sizing: border-box;
  height: 46px;
}
<div class="page">
  <div class="fixed">
    <table width="100%">
      <thead>
        <tr>
          <th style="width: 46px;">Name</th>
          <th style="width: 29px;">Company</th>
          <th style="width: 16px;">Address</th>
          <th style="width: 35px;">Spouse</th>
          <th style="width: 41px;">SSN</th>
        </tr>
      </thead>
    </table>
  </div>
</div>

于 2013-01-25T21:39:32.967 回答