<p dir="auto">Hey,</p>
<p dir="auto">Recently I've been putting together a page that has a lot of data. I'd like to consolidate this more by adding a scrollable feature to my table, however, overflowing the table in y with a max height causes the header to scroll. I've tried several CSS tricks and looked all over the internet for a solution. Most people suggest turning tbody into a block element, however this messes up all of the column formatting.</p>
<p dir="auto">Having the ability to do something similar to &lt;table class="table table-bordered table-scroll table-fixed-header" ....  would be awesome.</p>
<p dir="auto">Please consider adding a class named table-fixedheader that can be applied to a table so that the body scrolls under fixed headers.</p>
<p dir="auto">See this JSFiddle for a working demo:  <a href="http://jsfiddle.net/drueter/yqgB5/3/" rel="nofollow">http://jsfiddle.net/drueter/yqgB5/3/</a></p>
<p dir="auto">All that is needed:</p>
<div class="highlight highlight-source-css notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="table.table-fixedheader&gt;tbody {
    display: block;
}

table.table-fixedheader&gt;tbody {
    overflow-y: auto;
    height: 50px; /*placeholder:  override as needed*/
}

table.table-fixedheader&gt;thead&gt;tr&gt;th, table.table-fixedheader&gt;tbody&gt;tr&gt;td {
    float: left;
    width: 100px; /*placeholder:  override as needed*/
}"><pre class="notranslate"><span class="pl-ent">table</span>.<span class="pl-c1">table-fixedheader</span><span class="pl-c1">&gt;</span><span class="pl-ent">tbody</span> {
    <span class="pl-c1">display</span><span class="pl-kos">:</span> block;
}

<span class="pl-ent">table</span>.<span class="pl-c1">table-fixedheader</span><span class="pl-c1">&gt;</span><span class="pl-ent">tbody</span> {
    <span class="pl-c1">overflow-y</span><span class="pl-kos">:</span> auto;
    <span class="pl-c1">height</span><span class="pl-kos">:</span> <span class="pl-c1">50<span class="pl-smi">px</span></span>; <span class="pl-c">/*placeholder:  override as needed*/</span>
}

<span class="pl-ent">table</span>.<span class="pl-c1">table-fixedheader</span><span class="pl-c1">&gt;</span><span class="pl-ent">thead</span><span class="pl-c1">&gt;</span><span class="pl-ent">tr</span><span class="pl-c1">&gt;</span><span class="pl-ent">th</span><span class="pl-kos">,</span> <span class="pl-ent">table</span>.<span class="pl-c1">table-fixedheader</span><span class="pl-c1">&gt;</span><span class="pl-ent">tbody</span><span class="pl-c1">&gt;</span><span class="pl-ent">tr</span><span class="pl-c1">&gt;</span><span class="pl-ent">td</span> {
    <span class="pl-c1">float</span><span class="pl-kos">:</span> left;
    <span class="pl-c1">width</span><span class="pl-kos">:</span> <span class="pl-c1">100<span class="pl-smi">px</span></span>; <span class="pl-c">/*placeholder:  override as needed*/</span>
}</pre></div>
<p dir="auto">See comments in JSFiddle for usage notes.  This seems to work well.</p>