Twitterブートストラップのスクロール可能なテーブル

私のウェブサイトに表を載せたいのですが。問題は、このテーブルに約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>

max-heightとfixed heightをテーブルに適用しようとしましたが、機能しません。

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

.span3 {  
    height: 100px !important;
    overflow: scroll;
}​

独自のdivでラップするか、span3に独自のIDを指定して、レイアウト全体に影響を与えないようにします。

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

divでラップする必要はありません...

CSS：

tr {
width: 100%;
display: inline-table;
table-layout: fixed;
}

table{
 height:300px;              // <-- Select the height of the table
 display: -moz-groupbox;    // Firefox Bad Effect
}
tbody{
  overflow-y: scroll;      
  height: 200px;            //  <-- Select the height of the body
  width: 100%;
  position: absolute;
}

Bootply：http : //www.bootply.com/AgI8LpDugl

私は同じ問題を抱えており、上記の解決策を組み合わせて使用​​しました（そして私自身のひねりを加えました）。ヘッダーと本文の間で列幅を一致させるために、列幅を指定する必要があることに注意してください。

私の解決策では、本文がスクロールする間、ヘッダーとフッターは固定されたままです。

<div class="table-responsive">
    <table class="table table-striped table-hover table-condensed">
        <thead>
            <tr>
                <th width="25%">First Name</th>
                <th width="13%">Last Name</th>
                <th width="25%" class="text-center">Address</th>
                <th width="25%" class="text-center">City</th>
                <th width="4%" class="text-center">State</th>
                <th width="8%" class="text-center">Zip</th>
            </tr>
        </thead>
    </table>
    <div class="bodycontainer scrollable">
        <table class="table table-hover table-striped table-condensed table-scrollable">
            <tbody>
                <!-- add rows here, specifying same widths as in header, at least on one row -->
            </tbody>
        </table>
    </div>
    <table class="table table-hover table-striped table-condensed">
        <tfoot>
            <!-- add your footer here... -->
        </tfoot>
    </table>
</div>

そして、次のCSSを適用しました：

.bodycontainer { max-height: 450px; width: 100%; margin: 0; overflow-y: auto; }
.table-scrollable { margin: 0; padding: 0; }

これが他の誰かの役に立つことを願っています。

私は最近、これをブートストラップとangularjsで行う必要がありました。問題を解決するangularjsディレクティブを作成しました。実際の例と詳細については、このブログ投稿をご覧ください。

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

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

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

CSS

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

HTML

<div class="span3 achievements-wrapper">
    <h2>Achievements left</h2>
    <table class="table table-striped">
    ...
    </table>
</div>

これは、行数が多い場合の解決策ではない可能性があります。列数のフレックスを維持しながら、行数の少ないテーブルで処理を行うには、複製テーブルのトリックを使用するだけです。このフィドルを試すことができます。

（固定幅の列は、ヘッダー行の複製のみを必要とする大きな行数テーブルに使用する方法です）

サンプルコード：

<div style="height:30px;overflow:hidden;margin-right:15px;">
   <table class="table">
       <thead>
           <tr>
                <th>Col 1</th>
                <th>Col 2</th>
                <th>Col 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Cel 1,1</td>
                <td>Cel 1,2</td>
                <td>Cel 1,3</td>
            </tr>
            <tr>
                <td>Cel 2,1</td>
                <td>Cel 2,2</td>
                <td>Cel 2,3</td>
            </tr>
            <tr>
                <td>Cel 3,1</td>
                <td>Cel 3,2</td>
                <td>Cel 3,3</td>
            </tr>


        </tbody>
    </table>
</div>
<div style="height:100px;overflow-y:scroll;;">
    <table class="table">
        <thead>

        </thead>
        <tbody>
            <tr>
                <td>Cel 1,1</td>
                <td>Cel 1,2</td>
                <td>Cel 1,3</td>
            </tr>
            <tr>
                <td>Cel 2,1</td>
                <td>Cel 2,2</td>
                <td>Cel 2,3</td>
            </tr>
            <tr>
                <td>Cel 3,1</td>
                <td>Cel 3,2</td>
                <td>Cel 3,3</td>
            </tr>
             <tr style="color:white">
                <th>Col 1</th>
                <th>Col 2</th>
                <th>Col 3</th>
            </tr>
        </tbody>
    </table>
</div>

テーブルをdivに入れ、そのdivにクラスを割り当てpre-scrollableます。

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

最初の最も簡単な方法は、ヘッダー用と本体用の2つのテーブルを使用することでした。これは機能しますが、ヘッダーと本文の列が揃っていません。そして、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の幅とパディング、および行の幅を取得できます。CSSを使用して設定したdata-sort属性を使用して、それに応じて各ヘッダーのパディングと幅、およびスクロールバーがないため常に大きいヘッダー行のパディングと幅を使用します。これは、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というヘッダーの配列があると想定しています。

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

上記のすべてのソリューションでは、テーブルヘッダーもスクロールします... tbodyのみをスクロールする場合は、これを適用します。

tbody {
    height: 100px !important;
    overflow: scroll;
    display:block;
}

これらの答えはどれも、私には満足に機能しませんでした。彼らは、テーブルの見出し行を適切に修正しなかったか、または機能するために固定された列幅を必要とし、さらにさまざまなブラウザーで見出し行と本文行の位置がずれる傾向がありました。

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

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

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

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

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

.table-overflow { overflow: auto; }     

テーブルをdiv内に配置して、垂直方向にスクロール可能なテーブルを作成します。テーブルを水平方向にスクロールできるように変更overflow-yしoverflow-xます。overflowテーブルを水平方向と垂直方向の両方にスクロールできるようにするだけです。

<div style="overflow-y: scroll;"> 
    <table>
    ...
    </table>
</div>

上記のいずれもBootstrap 4で動作させることができなかったため、ここに投稿すると思いました。これをオンラインで見つけて、完璧に動作しました...

table
{
    width: 100%;
    display: block;
    border:solid black 1px;
}

thead
{
    display: inline-block;
    width: 100%;
    height: 20px;
}

tbody
{
    height: 200px;
    display: inline-block;
    width: 100%;
    overflow: auto;
}

th, td
{
    width: 100px;
    border:solid 1px black;
    text-align:center;
}

動作しているjsfindleも添付しました。

https://jsfiddle.net/jgngg28t/

それが他の誰かを助けることを願っています。