blocks|key|581208|text|表元素似乎不直接支持这一点。将表格放在div中，设置div的高度并设置overflow:+auto。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|581209|entityMap^0|Z|E|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>Table elements don't appear to support this directly. Place the table in a div and set the height of the div and set <code>overflow: auto</code>.</p>


blocks|key|365411|text|.span3+{++
++++height:+100px+!important;
++++overflow:+scroll;
}​|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|365412|您可能希望将它包装在它自己的div中，或者给span3一个它自己的id，这样就不会影响整个布局。|unstyled|365413|这里有一个小把戏：http://jsfiddle.net/zm6rf/|offset|length|365414|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/zm6rf/^0|0|0|9|Q|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|T|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|F|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<pre><code>.span3 {  
    height: 100px !important;
    overflow: scroll;
}​
</code></pre>

<p>You'll want to wrap it in it's own div or give that span3 an id of it's own so you don't affect your whole layout.</p>

<p>Here's a fiddle: <a href="http://jsfiddle.net/zm6rf/" rel="noreferrer">http://jsfiddle.net/zm6rf/</a></p>


blocks|key|581291|text|CSS|type|unstyled|depth|inlineStyleRanges|entityRanges|data|581292|.achievements-wrapper+{+height:+300px;+overflow:+auto;+}|code-block|syntax|javascript|581293|HTML|581294|<div+class="span3+achievements-wrapper">
++++<h2>Achievements+left</h2>
++++<table+class="table+table-striped">
++++...
++++</table>
</div>|581295|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>CSS</p>

<pre><code>.achievements-wrapper { height: 300px; overflow: auto; }
</code></pre>

<p>HTML</p>

<pre><code>&lt;div class="span3 achievements-wrapper"&gt;
    &lt;h2&gt;Achievements left&lt;/h2&gt;
    &lt;table class="table table-striped"&gt;
    ...
    &lt;/table&gt;
&lt;/div&gt;
</code></pre>


blocks|key|365527|text|我最近遇到了一个类似的问题，并最终使用不同解决方案的混合解决方案修复了它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|365528|第一个也是最简单的一个是使用两个表，一个用于标题，另一个用于正文。这是可行的，但是标题和正文列没有对齐。而且，因为我想使用twitter自举表格附带的自动调整大小，所以我最终创建了一个Javascript函数，它在以下情况下更改标题:呈现正文；调整窗口大小；更改列中的数据，等等。|365529|下面是我使用的一些代码：|365530|++++++++<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>|code-block|syntax|javascript|365531|标题和正文被划分为两个单独的表。其中一个是在DIV中，它具有生成垂直滚动条所需的样式。下面是我使用的CSS：|365532|.bodycontainer+{
++//height:+200px
++width:+100%25;
++margin:+0;
}

.table-scrollable+{
++margin:+0px;
++padding:+0px;
}|365533|我在这里注释了高度，因为我想让表格到达页面的底部，无论页面高度是多少。|365534|我在头部中使用的数据排序属性也在每个td中使用。这样我就可以得到每个td的宽度和填充，以及行的宽度。使用我使用CSS设置的数据排序属性，相应地设置每个标题和标题行的填充和宽度，因为它没有滚动条，所以总是更大。下面是使用coffeescript的函数：|365535|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%2B1)+==+@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|365536|在这里，我假设您有一个名为@headers的标头数组。|365537|它不是很漂亮，但它是有效的。希望这能帮助到别人。|365538|entityMap^0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|12|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|13|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|14|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|15|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|16|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|17|8|@]|9|@]|A|$]]|$1|S|3|T|5|H|7|18|8|@]|9|@]|A|$I|J]]|$1|U|3|V|5|6|7|19|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1A|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|Z|$]]

<p>I recently had a similar problem and ended up fixing it using a mixture of different solutions.</p>

<p>The first and most simple one was to use two tables, one for the headers and one for the body. This works but the headers and the body columns are not aligned. And, since I wanted to use the auto-size that comes with twitter bootstrap tables I ended up creating a Javascript function that changes the headers when: the body is rendered; the windows is resized; the data in the column changes, etc.</p>

<p>Here is some of the code I used:</p>

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

<p>The headers and the body are divided in two separate tables. One of them is inside a DIV with the necessary style to generate the vertical scrollbars. Here is the CSS I used:</p>

<pre><code>.bodycontainer {
  //height: 200px
  width: 100%;
  margin: 0;
}

.table-scrollable {
  margin: 0px;
  padding: 0px;
}
</code></pre>

<p>I commented the height here because I a wanted the table to reach the bottom of the page, whatever the page height might be.</p>

<p>The  data-sort attributes I used in the headers are also used in every td. This way I could get the width and the padding of every td and the width of the row. Using the data-sort attributes I set using CSS the padding and width of each header accordingly and of the header row which is always bigger since it doesn´t have a scrollbar. Here is the function using coffeescript:</p>

<pre><code>fixHeaders: =&gt;
  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
</code></pre>

<p>Here I assume that you have an array of the headers called @headers.</p>

<p>It is not pretty but it works. Hope it helps someone.</p>


blocks|key|581431|text|我遇到了同样的问题，并使用了上述解决方案的组合(并添加了我自己的解决方案)。请注意，我必须指定列宽，以保持标题和正文之间的宽度一致。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|581432|在我的解决方案中，页眉和页脚保持不变，而正文滚动。|581433|<div+class="table-responsive">
++++<table+class="table+table-striped+table-hover+table-condensed">
++++++++<thead>
++++++++++++<tr>
++++++++++++++++<th+width="25%25">First+Name</th>
++++++++++++++++<th+width="13%25">Last+Name</th>
++++++++++++++++<th+width="25%25"+class="text-center">Address</th>
++++++++++++++++<th+width="25%25"+class="text-center">City</th>
++++++++++++++++<th+width="4%25"+class="text-center">State</th>
++++++++++++++++<th+width="8%25"+class="text-center">Zip</th>
++++++++++++</tr>
++++++++</thead>
++++</table>
++++<div+class="bodycontainer+scrollable">
++++++++<table+class="table+table-hover+table-striped+table-condensed+table-scrollable">
++++++++++++<tbody>
++++++++++++++++
++++++++++++</tbody>
++++++++</table>
++++</div>
++++<table+class="table+table-hover+table-striped+table-condensed">
++++++++<tfoot>
++++++++++++
++++++++</tfoot>
++++</table>
</div>|code-block|syntax|javascript|581434|然后应用了下面的CSS：|581435|.bodycontainer+{+max-height:+450px;+width:+100%25;+margin:+0;+overflow-y:+auto;+}
.table-scrollable+{+margin:+0;+padding:+0;+}|581436|我希望这对其他人有帮助。|581437|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>I had the same issue and used a combination of the above solutions (and added a twist of my own). Note that I had to specify column widths to keep them consistent between header and body.</p>

<p>In my solution, the header and footer stay fixed while the body scrolls.</p>

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

<p>And then just applied the following CSS:</p>

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

<p>I hope this helps someone else.</p>


blocks|key|581451|text|以上所有的解决方案都可以让表头滚动。如果您只想滚动tbody，则应用以下内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|581452|tbody+{
++++height:+100px+!important;
++++overflow:+scroll;
++++display:block;
}|code-block|syntax|javascript|581453|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>All above solutions make table header scroll too...
If you want to scroll tbody only then apply this:</p>

<pre><code>tbody {
    height: 100px !important;
    overflow: scroll;
    display:block;
}
</code></pre>


blocks|key|581550|text|我最近不得不用bootstrap和angularjs来做这件事，我创建了一个angularjs指令来解决这个问题，你可以在这个blog+post上看到一个工作的例子和细节。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|581551|您只需向table标记添加一个固定标题属性即可使用它：|581552|<table+class="table+table-bordered"+fixed-header>
...
</table>|code-block|syntax|javascript|581553|如果你没有使用angularjs，你可以调整指令的javascript，直接使用它。|581554|entityMap|0|LINK|mutability|MUTABLE|url|http://pointblankdevelopment.com.au/blog/angularjs-fixed-header-scrollable-table-directive^0|1R|9|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|Z|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|C|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

<p>I recently had to do this with bootstrap and angularjs, I created an angularjs directive which solves the problem, you can see a working example and details on this <a href="http://pointblankdevelopment.com.au/blog/angularjs-fixed-header-scrollable-table-directive">blog post</a>.</p>

<p>You use it just by adding a fixed-header attribute to the table tag:</p>

<pre><code>&lt;table class="table table-bordered" fixed-header&gt;
...
&lt;/table&gt;
</code></pre>

<p>If you're not using angularjs you could tweak the directive's javascript and use it directly instead.</p>


blocks|key|365761|text|对于大行计数，这可能不是一个解决方案。我只是简单地使用复制表的技巧来完成小行计数表的事情，同时它可以保持灵活的列宽度，你可以尝试这个fiddle。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|365762|(固定宽度列是我用于大行计数表的方法，它只需要标题行复制)|365763|示例代码：|365764|<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>|code-block|syntax|javascript|365765|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/zjyuoyrt/^0|1U|6|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|10|8|@]|9|@]|C|$K|L]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

<p>This is may not a solution for large row count. I simply use duplication table trick to get the thing done for small row count table while it can keep flex column width, you can try this <a href="http://jsfiddle.net/zjyuoyrt/" rel="nofollow">fiddle</a>. </p>

<p>(The fixed width column is the method I use for large row count table which require only the header row duplication)</p>

<p>Sample Code:
    </p>

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


        &lt;/tbody&gt;
    &lt;/table&gt;
&lt;/div&gt;
&lt;div style="height:100px;overflow-y:scroll;;"&gt;
    &lt;table class="table"&gt;
        &lt;thead&gt;

        &lt;/thead&gt;
        &lt;tbody&gt;
            &lt;tr&gt;
                &lt;td&gt;Cel 1,1&lt;/td&gt;
                &lt;td&gt;Cel 1,2&lt;/td&gt;
                &lt;td&gt;Cel 1,3&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;Cel 2,1&lt;/td&gt;
                &lt;td&gt;Cel 2,2&lt;/td&gt;
                &lt;td&gt;Cel 2,3&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;Cel 3,1&lt;/td&gt;
                &lt;td&gt;Cel 3,2&lt;/td&gt;
                &lt;td&gt;Cel 3,3&lt;/td&gt;
            &lt;/tr&gt;
             &lt;tr style="color:white"&gt;
                &lt;th&gt;Col 1&lt;/th&gt;
                &lt;th&gt;Col 2&lt;/th&gt;
                &lt;th&gt;Col 3&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/tbody&gt;
    &lt;/table&gt;
&lt;/div&gt;
</code></pre>


blocks|key|365875|text|这些答案对我来说都不是令人满意的。它们要么没有在适当的位置修复表格标题行，要么需要固定的列宽才能工作，即使这样，在不同的浏览器中，标题行和正文行往往会不对齐。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|365876|我建议咬紧牙关，使用合适的网格控件，如jsGrid或我个人最喜欢的SlickGrid。它显然引入了一种依赖关系，但如果你想让你的表表现得像真正的网格一样，并支持跨浏览器，这将省去你的麻烦。它还为您提供了排序和调整列大小的选项，如果您需要的话，还可以添加大量其他功能。|offset|length|365877|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/tabalinas/jsgrid|1|https://github.com/mleibman/SlickGrid^0|0|J|6|0|X|9|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@$D|R|E|S|1|T]|$D|U|E|V|1|W]]|A|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]|N|$5|I|J|K|A|$L|O]]]]

<p>None of these answers worked satisfactorily for me. They either didn't fix the table heading row in place or they required fixed column widths to work, and even then tended to have the heading row and body rows misaligned in various browsers.</p>

<p>I recommend biting the bullet and using a proper grid control like <a href="https://github.com/tabalinas/jsgrid" rel="nofollow">jsGrid</a> or my personal favorite, <a href="https://github.com/mleibman/SlickGrid" rel="nofollow">SlickGrid</a>. It obviously introduces a dependency but if you want your tables to behave like real grids with cross-browser support, this will save you pulling your hair out. It also gives you the option of sorting and resizing columns plus tons of other features if you want them.</p>


blocks|key|365940|text|Re+Jonathan+Wood的建议。我没有使用新div包装表格的选项，因为我使用的是CMS。下面是我使用JQuery所做的工作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|365941|$(+"table"+).wrap(+"<div+class='table-overflow'></div>"+);|code-block|syntax|javascript|365942|这用"+table+-overflow“类包装了一个新的div表元素。|365943|然后，您可以简单地在css文件中添加以下定义：|365944|.table-overflow+{+overflow:+auto;+}+++++|365945|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Re Jonathan Wood's suggestion.  I don't have the option of wrapping tables with a new div as i'm using a CMS.  Using JQuery here's what i did:</p>

<pre><code>$( "table" ).wrap( "&lt;div class='table-overflow'&gt;&lt;/div&gt;" );
</code></pre>

<p>This wraps table elements with a new div with the class "table-overflow".</p>

<p>You can then simply add the following definition in your css file:</p>

<pre><code>.table-overflow { overflow: auto; }     
</code></pre>


blocks|key|581906|text|将表放在一个div中，并为该div提供类pre-scrollable。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|581907|entityMap^0|K|E|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>Put the table in a div and give that div the class <code>pre-scrollable</code>.</p>


blocks|key|366106|text|我想我会在这里发帖，因为我无法在Bootstrap+4上使用上面的任何一个。我在网上找到了这个，对我来说工作得很完美…|type|unstyled|depth|inlineStyleRanges|entityRanges|data|366107|table
{
++++width:+100%25;
++++display:+block;
++++border:solid+black+1px;
}

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

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

th,+td
{
++++width:+100px;
++++border:solid+1px+black;
++++text-align:center;
}|code-block|syntax|javascript|366108|我还附上了工作的jsfindle。|366109|https://jsfiddle.net/jgngg28t/|offset|length|366110|希望这对其他人有帮助。|366111|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|U|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|W|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|X|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|Y|8|@]|9|@$K|Z|L|10|1|11]]|A|$]]|$1|M|3|N|5|6|7|12|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|J]]]]

<p>Figured I would post on here since I could not get any of the above to work with Bootstrap 4. I found this online and worked perfectly for me...</p>

<pre class="lang-json prettyprint-override"><code>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;
}
</code></pre>

<p>I have also attached the working jsfindle.</p>

<p><a href="https://jsfiddle.net/jgngg28t/" rel="nofollow noreferrer">https://jsfiddle.net/jgngg28t/</a></p>

<p>Hope it helps someone else.</p>


blocks|key|366154|text|将表格放在div中，使表格可以垂直滚动。将overflow-y更改为overflow-x，以使表格可水平滚动。只需使用overflow即可使表格水平和垂直滚动。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|366155|<div+style="overflow-y:+scroll;">+
++++<table>
++++...
++++</table>
</div>|code-block|syntax|javascript|366156|entityMap^0|L|A|Y|A|1N|8|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|U|8|@]|D|@]|E|$]]]|L|$]]

<p>put the table inside the div to make scrollable table vertically. change <code>overflow-y</code>to <code>overflow-x</code> to make table scrollable horizontally. just <code>overflow</code> to make table scrollable both horizontal and vertical.</p>

<pre><code>&lt;div style="overflow-y: scroll;"&gt; 
    &lt;table&gt;
    ...
    &lt;/table&gt;
&lt;/div&gt;
</code></pre>


blocks|key|366212|text|这个例子展示了在使用Bootstrap+4表格样式时如何使用粘性标题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|366213|​|366214|.table-scrollable+{
++++/*+set+the+height+to+enable+overflow+of+the+table+*/
++++max-height:+200px;
++++
++++overflow-x:+auto;
++++overflow-y:+auto;
++++scrollbar-width:+thin;
}

.table-scrollable+thead+th+{
++++border:+none;
}

.table-scrollable+thead+th+{
++++/*+Set+header+to+stick+to+the+top+of+the+container.+*/
++++position:+sticky;+
++++top:+0px;
++++
++++/*+This+is+needed+otherwise+the+sticky+header+will+be+transparent+
++++*/
++++background-color:+white;

++++/*+Because+bootstrap+adds+`border-collapse:+collapse`+to+the
+++++*+table,+the+header+boarders+aren't+sticky.
+++++*+So,+we+need+to+make+some+adjustments+to+cover+up+the+actual
+++++*+header+borders+and+created+fake+borders+instead
+++++*/
++++margin-top:+-1px;
++++margin-bottom:+-1px;

++++/*+This+is+our+fake+border+(see+above+comment)+*/
++++box-shadow:+inset+0+1px+0+#dee2e6,
++++++++++++++++inset+0+-1px+0+#dee2e6;
}|code-block|syntax|javascript|366215|
<link+rel="stylesheet"+href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"+integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"+crossorigin="anonymous">


<script+src="https://code.jquery.com/jquery-3.5.1.slim.min.js"+integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C%2BOGpamoFVy38MVBnE%2BIbbVYUew%2BOrCXaRkfj"+crossorigin="anonymous"></script>
<script+src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"+integrity="sha384-ho%2Bj7jyWK8fNQe%2BA12Hb8AhRq26LrZ/JpcUGGOn%2BY7RsweNrtN/tE3MoK7ZeZDyx"+crossorigin="anonymous"></script>


<div+class="dashboard-container+card">
++<div+class="card-body">
++++<div+class="table-scrollable">
++++++<table+class="table+table-hover+table-sortable">
++++++++++<thead>
++++++++++++++<tr>
++++++++++++++++++<th+data-sort-type="text">Course</th>
++++++++++++++++++<th+data-sort-type="numeric">In+Progress</th>
++++++++++++++++++<th+data-sort-type="numeric">Not+Started</th>
++++++++++++++++++<th+data-sort-type="numeric">Passed</th>
++++++++++++++++++<th+data-sort-type="numeric">Failed</th>
++++++++++++++</tr>
++++++++++</thead>
++++++++++<tbody>
++++++++++++<tr>
++++++++++++++<td>How+to+be+good+at+stuff</td>
++++++++++++++<td>0</td>
++++++++++++++<td>1000</td>
++++++++++++++<td>0</td>
++++++++++++++<td>0</td>
++++++++++++</tr>
++++++++++++<tr>
++++++++++++++<td>Quantum+physics+for+artists</td>
++++++++++++++<td>200</td>
++++++++++++++<td>6</td>
++++++++++++++<td>66</td>
++++++++++++++<td>66</td>
++++++++++++</tr>
++++++++++++<tr>
++++++++++++++<td>The+best+way+to+skin+a+cat</td>
++++++++++++++<td>34</td>
++++++++++++++<td>16</td>
++++++++++++++<td>200</td>
++++++++++++++<td>7</td>
++++++++++++</tr>
++++++++++++<tr>
++++++++++++++<td>Human+cookbook</td>
++++++++++++++<td>4</td>
++++++++++++++<td>7</td>
++++++++++++++<td>4</td>
++++++++++++++<td>50</td>
++++++++++++</tr>
++++++++++++<tr>
++++++++++++++<td>Aristocracy+rules</td>
++++++++++++++<td>100</td>
++++++++++++++<td>3</td>
++++++++++++++<td>6</td>
++++++++++++++<td>18</td>
++++++++++++</tr>
++++++++++</tbody>
++++++</table>
++++</div>
++</div>
</div>|366216|366217|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>This example shows how to have sticky headers when using Bootstrap 4 table styling.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.table-scrollable {
    /* set the height to enable overflow of the table */
    max-height: 200px;
    
    overflow-x: auto;
    overflow-y: auto;
    scrollbar-width: thin;
}

.table-scrollable thead th {
    border: none;
}

.table-scrollable thead th {
    /* Set header to stick to the top of the container. */
    position: sticky; 
    top: 0px;
    
    /* This is needed otherwise the sticky header will be transparent 
    */
    background-color: white;

    /* Because bootstrap adds `border-collapse: collapse` to the
     * table, the header boarders aren't sticky.
     * So, we need to make some adjustments to cover up the actual
     * header borders and created fake borders instead
     */
    margin-top: -1px;
    margin-bottom: -1px;

    /* This is our fake border (see above comment) */
    box-shadow: inset 0 1px 0 #dee2e6,
                inset 0 -1px 0 #dee2e6;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- CSS --&gt;
&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"&gt;

&lt;!-- jQuery and JS bundle w/ Popper.js --&gt;
&lt;script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"&gt;&lt;/script&gt;
&lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"&gt;&lt;/script&gt;


&lt;div class="dashboard-container card"&gt;
  &lt;div class="card-body"&gt;
    &lt;div class="table-scrollable"&gt;
      &lt;table class="table table-hover table-sortable"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th data-sort-type="text"&gt;Course&lt;/th&gt;
                  &lt;th data-sort-type="numeric"&gt;In Progress&lt;/th&gt;
                  &lt;th data-sort-type="numeric"&gt;Not Started&lt;/th&gt;
                  &lt;th data-sort-type="numeric"&gt;Passed&lt;/th&gt;
                  &lt;th data-sort-type="numeric"&gt;Failed&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;tr&gt;
              &lt;td&gt;How to be good at stuff&lt;/td&gt;
              &lt;td&gt;0&lt;/td&gt;
              &lt;td&gt;1000&lt;/td&gt;
              &lt;td&gt;0&lt;/td&gt;
              &lt;td&gt;0&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;Quantum physics for artists&lt;/td&gt;
              &lt;td&gt;200&lt;/td&gt;
              &lt;td&gt;6&lt;/td&gt;
              &lt;td&gt;66&lt;/td&gt;
              &lt;td&gt;66&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;The best way to skin a cat&lt;/td&gt;
              &lt;td&gt;34&lt;/td&gt;
              &lt;td&gt;16&lt;/td&gt;
              &lt;td&gt;200&lt;/td&gt;
              &lt;td&gt;7&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;Human cookbook&lt;/td&gt;
              &lt;td&gt;4&lt;/td&gt;
              &lt;td&gt;7&lt;/td&gt;
              &lt;td&gt;4&lt;/td&gt;
              &lt;td&gt;50&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;Aristocracy rules&lt;/td&gt;
              &lt;td&gt;100&lt;/td&gt;
              &lt;td&gt;3&lt;/td&gt;
              &lt;td&gt;6&lt;/td&gt;
              &lt;td&gt;18&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>I would like to have a table on my website. The problem is that this table will have about 400 lines. How can I limit the table's height, and apply scrollbar to it?
This is my code:</p>

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

  &lt;p&gt;&lt;a class="btn" href="#"&gt;View details &amp;raquo;&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>I tried to apply max-height and fixed height to table, but it doesn't work.</p>


Twitter bootstrap scrollable table

jQuery

我想在我的网站上有一张桌子。问题是这个表大约有400行。如何限制表格的高度，并对其应用滚动条？这是我的代码：<div class="span3">  <h2>Achievements left</h2><table class="table table-striped">  <thead>    <tr>      <...

问Twitter bootstrap可滚动表格
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Twitter bootstrap可滚动表格EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Twitter bootstrap可滚动表格
EN