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 に答える