2

これは私がやったことです。http://jsfiddle.net/FeHdS/5/

ご覧のとおり、ブラウザのスクロールバーを使用すると、テーブル全体が「mainwrapper」divの後ろに表示されます。ヘッダーが固定されたテーブルが欲しいのですが、オーバーフロースクロールを使用したくありません。

私が試したのは、単に固定位置を広告に割り当てることでした。 

thead{
    position: fixed;
}

ただし、テーブルの最初の行がヘッダーの場所になります。

CSSだけでそれを行う方法はありますか？そうでない場合、最善の解決策は何でしょうか？

4

1 に答える 1

0

これは、JavaScriptでCSSを使用して行うことができます。

基本的に、CSSを使用してテーブルとテーブルヘッダー行を配置し、テーブルをだましてdivのように動作させます。次に、javascriptを使用して、テーブルヘッダー行のCSS配置と、テーブルがスクロールするときに通常のテーブル行を非表示にする「マスク」divを操作します。テーブルはdivであると見なし、セルの幅を一致させずにセルのサイズを変更するため、CSSを使用して、テーブルヘッダーの幅がtdの幅と一致するように幅を設定する必要もあります。

関連するコンポーネントは次のとおりです。

<!-- divs with IDs are manipulated with javascript -->
<div class="fixedTableHolder">

  <div class="maskHolder">
     <div id="mask" class="mask">&nbsp;</mask>
  </div>

  <div class="fixedTable">
    <div id="theTable" class="theTable">

       <!-- here is the table, header row must have an ID -->
       <table border="0" cellspacing="5" cellpadding="5"> 
          <tr id="thFixed" class="thFixed"> 
            <td class="col1">Header cell 1</td> 
          </tr>
          <tr>
            <td class="col1">regular cell</td>
          </tr>
       </table>

    </div>
  </div>

</div>

これはかなり複雑で、実装には1〜2分以上かかります。頻繁に再利用するアプリでやった。これがjsFiddleのデモです（CSSとjavascript、およびhtmlが含まれています）：http： //jsfiddle.net/deborah/Msvvr/

于 2013-04-03T19:34:02.847 に答える