Databases
StackOverflow2013
Postsdbo
POSticky Table Header with 100% height "panes"
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSticky Table Header with 100% height "panes"
    text
    copied!<p><strong>Background:</strong> I am using CSS to create a web app like experience, where everything on the page is always visible, and only certain <code>panes</code> are scrollable. I now have a need to expand this to tables. I want the table header to always stay visible (and sometimes a footer) but the table body should be scrollable only.</p> <p>What I have done so far is apply a "pane" class to the <code>thead</code> and <code>tfoot</code>, and then made the <code>tbody</code> auto fill the height and then make it scrollable. All of this works except that the thead, tbody, and tfoot are no longer 100% width. This method seems to get me the closest to what I want.</p> <p><strong>Fiddle:</strong> I have a JSFiddle that gets me close, it also demonstrates the code I'm using to create the fixed and scrollable <code>panes</code>. <a href="http://jsfiddle.net/va4HF/1/" rel="nofollow noreferrer">http://jsfiddle.net/va4HF/1/</a></p> <p><strong>Requirements:</strong> Ideally I would like to keep my <code>pane</code> css as it is, but adapt it when a table is needed. I'd also like to keep this CSS only.</p> <p>The following code is my proof-of-concept code, and includes the Pane CSS as well.</p> <p><strong>HTML:</strong></p> <pre><code>&lt;div class="column"&gt; &lt;div class="pane top"&gt;Top&lt;/div&gt; &lt;div class="pane middle"&gt; &lt;table&gt; &lt;thead class="pane table-head"&gt; &lt;tr&gt; &lt;th&gt;Header&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody class="pane table-body fill"&gt; &lt;tr&gt;&lt;td&gt;Text&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Text&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Text&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Text&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Text&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Text&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Text&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Text&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Text&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Text&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Text&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Text&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Text&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Text&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Text&lt;/td&gt;&lt;/tr&gt; &lt;/tbody&gt; &lt;tfoot class="pane table-foot"&gt; &lt;tr&gt; &lt;th&gt;Footer&lt;/th&gt; &lt;/tr&gt; &lt;/tfoot&gt; &lt;/table&gt; &lt;/div&gt; &lt;div class="pane bottom"&gt;Bottom&lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>CSS:</strong></p> <pre><code>body, html { height:100%; margin:0; padding:0; } div { box-sizing:border-box; box-sizing:content-box\9; /* Fix for IE9 sizing */ -moz-box-sizing:border-box; /* Fix for firefox sizing */ } .column { position:absolute; width:100%; min-height:100%; height:auto; overflow:hidden; } .pane { position:absolute; width:100%; overflow:hidden; } .fill { height:auto; overflow:auto; } .top { background:pink; height: 20%; top:0; } .middle { background:red; top:20%; bottom:50px; } .table-head { height: 40px; top:0; } .table-body { top:40px; bottom:40px; } .table-foot { height: 40px; bottom:0; } .bottom { background:orange; height: 50px; bottom:0; } table thead tr, table tfoot tr {background:rgba(0,0,0,0.5);} table tbody tr {background:rgba(0,0,0,0.3);} table td, table th {padding:10px; color:#fff;} /* Fix for Safari scrollbars (also styles Chrome scrollbars) */ .fill::-webkit-scrollbar {-webkit-appearance: none;width: 10px;} .fill::-webkit-scrollbar-track {background-color: rgba(0,0,0, .3);border-radius: 0px;} .fill::-webkit-scrollbar-thumb {border-radius: 0px; background-color: rgba(255,255,255, .4);} </code></pre> <p><strong>Research</strong>: Someone else has asked this with a similar situation at <a href="https://stackoverflow.com/questions/17010762/table-that-fills-100-parent-height-with-fixed-header-footer">Table that Fills 100% Parent Height with Fixed Header/Footer</a> but never got a good response and ended up going with Javascript, but I would like to try and find a CSS solution. Or at the very least a simpler Javascript solution then what he used (avoid having to overlay three tables)</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload