8

私は3つのdivを持っています。ヘッダー、中央、フッター。中央のdiv（グリッドビュー）には、ほとんどの場合、外側のdivよりも長いテーブルがあります。そこで、このdivを垂直方向にスクロール可能にしました。問題は、divを下にスクロールした後に表示されるテーブルヘッダーを作成するにはどうすればよいですか？このヘッダーを個別のdivまたはテーブルで作成して固定することもできますが、テーブルの列の幅は常に同じではないため、ヘッダーの列の幅を維持する方法がわかりません。どんな手掛かり？

4

11 に答える 11

13

私はあなたが望むことを正確に行うjQueryプラグインをまとめました。サイズが非常に小さく、実装が非常に簡単です。

必要なのは、thead と tbody を持つテーブルだけです。

クラス名を使用してそのテーブルを DIV でラップすると、テーブルは常にその div に収まるようにサイズ変更されます。たとえば、div がブラウザ ウィンドウに合わせてスケーリングされる場合、テーブルも同様にスケーリングされます。スクロールするとヘッダーが固定されます。フッターは固定されます (フッターを有効にした場合)。フッターのヘッダーを複製して修正するオプションもあります。また、ブラウザ ウィンドウを小さくしすぎてすべての列が収まらない場合は、水平方向にもスクロールします (ヘッダーも)。

$('.myDiv').fixedHeaderTable({footer: true, footerId: 'myFooterId'}); のように、DIV のクラス名をプラグインに渡すだけです。あとはプラグインがやってくれます。FooterID は、フッターのマークアップを含むページ上の要素です。これは、ページネーションをフッターとして使用する場合に使用されます。

ページに複数のテーブルがある場合は、固定ヘッダーが必要な各テーブルでも機能します。

ここでチェックしてください：http://fixedheadertable.mmalek.com/

まだ「ベータ版」であることを覚えておいてください。新しい機能とバグ修正を毎日追加しています。

対応ブラウザ：IE6、IE7、IE8、FireFox、Safari、Chrome

于 2009-10-07T19:19:17.477 に答える
12

解決策は本当に簡単です。3 つの DIV が必要です: 一般的なコンテナー (私の場合はクラス "outer")、テーブル コンテナー (私の場合はクラス "inner")、および jQuery または javaScript を使用して既存のテーブルのクローンを作成する DIV (クラス「ヘッダー」の場合）。

ソリューションは、CSS と数行の jQuery コードを使用して、"inner" の HTML を "header" に複製し、その幅と高さを設定します。固定および可変の列幅をサポートします。IE8、Firefox 9、Safari、Google Chrome でテスト済み。

サンプルコードは次のとおりです。

    	$(document).ready(function() {
    		$('.header').html( $('.inner').html() );
    		$('.header').css('width', $('.inner table').outerWidth() );
    		$('.header').css('height', $('.inner table thead').outerHeight() );
    	});
table {
  width:100%;
}
th {
  border-top:1px solid #999;
  text-align:left;
}
td, th {
  border-bottom:1px solid #999;
  background-color:#EEE;
}
.outer {
  position:relative;
  width:500px;
}
.inner {
  height:150px;
  overflow:auto;
}
.header {
  position:absolute;
  top:0;
  left:0;
  overflow:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="outer">
  <div class="inner">
    <table cellspacing="0" cellpadding="0">
      <thead>
        <tr>
          <th>a</th>
          <th>b</th>
          <th>c</th>
          <th>d</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>1</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>2</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>3</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>4</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>5</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>6</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>7</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>8</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>9</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>10</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>11</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>12</td><td>b</td><td>c</td><td>d</td></tr>
      </tbody>
    </table>
  </div>

  <div class="header">
  </div>

</div>
</body>

于 2012-01-07T23:39:16.783 に答える
11

javascriptを使用した基本的な解決策は次のとおりです。

function position(table) {
    table.rows[0].style.position="absolute";
    table.rows[0].style.top="0px";
    table.style.marginTop = table.rows[0].clientHeight/1.2;
    var widths = Array();
    for(var i = 0; i < table.rows[0].cells.length; i++) {
        widths[i] = max(table.rows[0].cells[i].clientWidth, table.rows[1].cells[i].clientWidth);
    }
    for(var row = 0; row < table.rows.length; row++) {
        for(var col = 0; col < widths.length; col ++) {
            table.rows[row].cells[col].style.width = widths[col] + "px";
        }
    }
}

function max(num1, num2) { return (num1 > num2) ? num1 : num2; }
于 2009-01-31T05:10:31.093 に答える
3

スクロール可能なdivの外側にヘッダーを配置する必要があります。div内のすべてがスクロールします。

編集

別のヘッダーを使用する場合の幅については、いくつかの解決策があります。

  • これが動的コンテンツであると仮定して、文字列の長さに基づいて「固定」幅を生成します。明らかにEMの観点から指定し、エラーの許容範囲を残します。
  • javascriptを使用します。
  • 固定幅の列を使用します。

私は実際に最初の試みをしていません、そしてそれは物事を少し複雑にしすぎているかもしれません。ただし、効果が必要な場合は試してみてください。

また、これをすでに実行しているテーブルウィジェットを備えたjavascriptライブラリがおそらく存在することにも言及する必要があります。彼らがそれをどのように行うかを見るために彼らを見てください。

于 2009-01-28T05:39:47.377 に答える
2

データのテーブルに関するヘッダーを含むテーブルを配置する必要があります。table-layout:fixed で列幅を維持できます。JavaScript を使用して列幅を一致させることができます。

于 2009-01-28T05:59:53.513 に答える
2

実際にやりたいことは<tbody>、データ テーブルの をスクロール可能にすることです。そのため、<thead>と<tfoot>は自然に固定されたままになります。

これはFFなどにとっては些細なことですが：

tbody
{
    height: 100px; /* or whatever */
    overflow: auto;
    overflow-y: auto;
    overflow-x: hidden;
}

IE には、一般的に tbody に関する深刻で複雑な問題があります。式で解決できますが、自明ではなく、デザインに固有のものです。

于 2009-02-04T12:17:50.027 に答える
2

jQuery プラグインStupid Fixed Headerを試すことができます。手法は基本的に同じです。ヘッダーを複製して、テーブル レイヤーの上に配置します。

于 2009-02-04T11:07:59.403 に答える
1

私はこれをテストしていませんが、おそらくテーブルを 2 回 (ヘッダーで 1 回、スクロール div で 1 回) 生成できます。次に、ヘッダーで、見出し行を除くすべての行を非表示にします。おそらく「display: none」を使用するか、高さをゼロに設定します。

于 2009-01-28T06:02:28.953 に答える
1

包括的なクロスブラウザー実装を探している場合は、YUI Data Table を参照してください。これは、列幅が一致する別のテーブルを作成することで行われると思います。

列幅を固定するにはコツが必要なようです。私の記憶が正しければ、Firefox には <col/> タグが必要です。

いずれにせよ、YUI DataTable (50k 行) には多くのトリックが採用されていました。それを見て、これで自分でどこまで行きたいかを決めることをお勧めします.

于 2009-02-04T11:37:20.657 に答える