161

私のウェブサイトにテーブルを置きたいのですが。問題は、このテーブルに約400行が含まれることです。テーブルの高さを制限し、それにスクロールバーを適用するにはどうすればよいですか？これは私のコードです：

<div class="span3">
  <h2>Achievements left</h2>
<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Something</td>
    </tr>
  </tbody>
</table>

  <p><a class="btn" href="#">View details &raquo;</a></p>
</div>

テーブルに最大高さと固定高さを適用しようとしましたが、機能しません。

4

16 に答える 16

263

テーブル要素はこれを直接サポートしていないようです。テーブルをdivに配置し、divの高さを設定して設定しoverflow: autoます。

于 2012-05-02T19:15:41.223 に答える
57 
.span3 {  
    height: 100px !important;
    overflow: scroll;
}​

独自の div でラップするか、その span3 に独自の ID を与えて、レイアウト全体に影響を与えないようにする必要があります。

ここにフィドルがあります：http://jsfiddle.net/zm6rf/

于 2012-05-02T19:19:34.507 に答える
10

CSS

.achievements-wrapper { height: 300px; overflow: auto; }

HTML

<div class="span3 achievements-wrapper">
    <h2>Achievements left</h2>
    <table class="table table-striped">
    ...
    </table>
</div>
于 2012-05-02T19:24:49.947 に答える
9

最近、bootstrap と angularjs を使用してこれを行う必要がありました。この問題を解決する angularjs ディレクティブを作成しました。実際の例と詳細については、このブログ投稿を参照してください。

table タグに fixed-header 属性を追加するだけで使用できます。

<table class="table table-bordered" fixed-header>
...
</table>

angularjs を使用していない場合は、ディレクティブの JavaScript を微調整して、代わりに直接使用できます。

于 2014-07-18T00:05:54.233 に答える
5

テーブルを div に配置し、その div に class を指定しpre-scrollableます。

于 2017-12-17T20:23:30.200 に答える
3

これらの答えはどれも私にとって満足のいくものではありませんでした。表の見出し行を所定の位置に修正しなかったか、動作させるために列幅を固定する必要があり、それでもさまざまなブラウザーで見出し行と本文行がずれている傾向がありました。

弾丸を噛んで、 jsGridや個人的にお気に入りのSlickGridなどの適切なグリッド コントロールを使用することをお勧めします。明らかに依存関係が生じますが、テーブルをクロス ブラウザー サポートを備えた実際のグリッドのように動作させたい場合は、これで手間が省けます。また、列の並べ替えとサイズ変更のオプションに加えて、必要に応じて他の多くの機能も提供します.

于 2015-02-20T01:35:59.980 に答える
3

最近、同様の問題が発生し、さまざまなソリューションを組み合わせて修正することになりました。

最初の最も単純な方法は、2 つのテーブルを使用することでした。1 つはヘッダー用で、もう 1 つは本文用です。これは機能しますが、ヘッダーと本文の列が整列していません。そして、Twitter のブートストラップ テーブルに付属する自動サイズを使用したかったので、次の場合にヘッダーを変更する Javascript 関数を作成することになりました。ウィンドウのサイズが変更されます。列のデータの変更など。

私が使用したコードの一部を次に示します。

        <table class="table table-striped table-hover" style="margin-bottom: 0px;">
        <thead>
            <tr>
                <th data-sort="id">Header 1</i></th>
                <th data-sort="guide">Header 2</th>
                <th data-sort="origin">Header 3</th>
                <th data-sort="supplier">Header 4</th>
            </tr>
        </thead>
    </table>
    <div class="bodycontainer scrollable">
        <table class="table table-hover table-striped table-scrollable">
            <tbody id="rows"></tbody>
        </table>
    </div>

ヘッダーと本文は、2 つの別個のテーブルに分かれています。それらの 1 つは、垂直スクロールバーを生成するために必要なスタイルを持つ DIV 内にあります。使用したCSSは次のとおりです。

.bodycontainer {
  //height: 200px
  width: 100%;
  margin: 0;
}

.table-scrollable {
  margin: 0px;
  padding: 0px;
}

ページの高さに関係なく、テーブルがページの下部に届くようにしたかったので、ここで高さについてコメントしました。

ヘッダーで使用した data-sort 属性は、すべての td でも使用されます。このようにして、すべての td の幅とパディング、および行の幅を取得できました。data-sort 属性を使用して、CSS を使用して、それに応じて各ヘッダーのパディングと幅を設定し、スクロールバーがないため常に大きいヘッダー行を設定しました。以下は、coffeescript を使用した関数です。

fixHeaders: =>
  for header, i in @headers
    tdpadding = parseInt(@$("td[data-sort=#{header}]").css('padding'))
    tdwidth = parseInt(@$("td[data-sort=#{header}]").css('width'))
    @$("th[data-sort=#{header}]").css('padding', tdpadding)
    @$("th[data-sort=#{header}]").css('width', tdwidth)
    if (i+1) == @headers.length
      trwidth = @$("td[data-sort=#{header}]").parent().css('width')
      @$("th[data-sort=#{header}]").parent().parent().parent().css('width', trwidth)
      @$('.bodycontainer').css('height', window.innerHeight - ($('html').outerHeight() -@$('.bodycontainer').outerHeight() ) ) unless @collection.length == 0

ここでは、@headers というヘッダーの配列があると仮定します。

きれいではありませんが、機能します。それが誰かを助けることを願っています。

于 2013-06-18T18:46:29.223 に答える
2

ジョナサン・ウッドの提案について。CMS を使用しているため、テーブルを新しい div でラップするオプションがありません。JQueryを使用して、私がしたことは次のとおりです。

$( "table" ).wrap( "<div class='table-overflow'></div>" );

これにより、クラス「table-overflow」を持つ新しい div でテーブル要素がラップされます。

次に、css ファイルに次の定義を追加するだけです。

.table-overflow { overflow: auto; }
于 2016-05-31T09:16:52.023 に答える