6

大きなデータ テーブルを含む div を含むページがあります。overflow-x:hidden;overflow-y:scroll;div には、ページのスクロールの代わりに、この div のスクロールバーを使用してスクロールするだけのオーバーフロー値があります。ただし、テーブル ヘッダー (スレッド) は固定されており、スクロールすると div の上部に留まりますが、スクロール バーをカバーします。
テーブルヘッダーをスクロールバー付きの div の 100% にしたいのですが、テーブルの残りの部分と同じように動作させ、スクロールバーを覆わないようにしたいのです。
これを Chrome、Firefox、IE9 でテストしましたが、どれも同じように見えました。

HTML

 <div style='position:absolute;bottom:0;height:396px;width:100%;overflow-y:scroll;overflow-x:hidden;'>
  <table id='select-customer-results' style='margin-top:-1px;position:fixed;width:100%;'>
   <tr>
    <th style='width:15%;'>Code</th>
    <th style='width:85%;'>Name</th>
   </tr>
   </table>
   <div style='height:37px;'></div>
   <table id='select-customer-results'>
    <!--A lot of rows!-->
   </table>
  </div>

<h2>CSS

table#select-customer-results{
 width:100%;
 margin-top:-5px;
}
table#select-customer-results tr{
 border-bottom:1px solid #797979;
}
table#select-customer-results tr:nth-child(even){
 background:#EBF2F7;
}
table#select-customer-results td,table#select-customer-results th{
 font-family:Helvetica, Arial, sans-serif;
 padding:5px;
 border:1px solid #797979; 
}
table#select-customer-results td{
 cursor:pointer; 
}
table#select-customer-results tr.clickable:hover{
 background-color:#BCC2C6;
}
table#select-customer-results th{
 color:#FFF;
 padding:7px;
 padding-top:10px;
 font-weight:bold;
 text-align:left;
 box-shadow:0 2px 3px 0 #474747;
 -webkit-box-shadow:0 2px 3px 0 #474747;
 -moz-box-shadow:0 2px 3px 0 #474747;
 background: #878787;
 background: -moz-linear-gradient(top,  #878787 0%, #6E6E6E 50%, #5C5C5C 51%, #7B7B7B 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#878787), color-stop(50%,#6E6E6E), color-stop(51%,#5C5C5C), color-stop(100%,#7B7B7B));
 background: -webkit-linear-gradient(top,  #878787 0%,#6E6E6E 50%,#5C5C5C 51%,#7B7B7B 100%);
 background: -o-linear-gradient(top,  #878787 0%,#6E6E6E 50%,#5C5C5C 51%,#7B7B7B 100%);
 background: -ms-linear-gradient(top,  #878787 0%,#6E6E6E 50%,#5C5C5C 51%,#7B7B7B 100%);
 background: linear-gradient(to bottom,  #878787 0%,#6E6E6E 50%,#5C5C5C 51%,#7B7B7B 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#878787', endColorstr='#7B7B7B',GradientType=0 );
}​

jsfiddle の例を次に示します。

http://jsfiddle.net/Q3sbp/

4

2 に答える 2

1

私があなたのコードで指摘したいくつかの問題があります。まず、セマンティックではありません。タグの要点はth、機械で読み取り可能にすることですが、thコンテンツのないテーブル用にテーブルを分割し、コンテンツのあるテーブルにはヘッダーがないようにテーブルを分割しました。別の問題は、id両方のテーブルに同じものを使用していることです。id属性は、要素を一意に定義することになっています。両方のテーブルに同じスタイルを適用する場合は、クラスを指定する必要があります。

それらはさておき、いくつかの解決策を見てみましょう。th私が持っていた最初のアイデアは、テーブルに負のマージンを設定して、div の外 (正確にはその上) に表示されるようにすることでした。ただし、これは機能しません。これは、div の全体的なポイントがそのoverflow-y設定を に設定することであるためscrollです。したがって、テーブルのコードを div の外に移動する必要があります。

JSFiddleでは、次のようになります。

コードを少しだけ変更しました。そこにある奇妙なheight: 35pxdiv を取り除き、絶対配置も削除しました。両方が並ぶように絶対配置することは難しくありません。

于 2012-10-08T21:07:12.910 に答える
0

position:fixedヘッダーテーブルで離陸する必要があります。<div style='height:37px;'></div>さらに、ヘッダーの後に不要なスペースが追加されるため、削除する必要もあります。これが更新された fiddleです。

于 2012-10-08T21:06:41.787 に答える