html - Scrollable tbody inside grid layout -
i have simple 3-part layout (header/sidebar/content) using css grid. inside content, have table.
i want table fill remaining space in div.content , have tbody own scrollbar.
every combination of overflow-y: scroll; , position: relative various widths/heights results in either div.content getting scrollbar, or <table> overflowing (see example - on jsbin).
how can make tables <tbody> receive scrollbar, , have table bounded content div without overflowing?
html, body { margin: 0; height: 100%; } main { display: grid; grid-template-areas: 'header header' 'sidebar content'; grid-template-rows: 100px 1fr; grid-template-columns: 200px 1fr; width: 100%; height: 100%; } header { background-color: #ccc; grid-area: header; padding: 20px; } aside { background-color: #eee; grid-area: sidebar; padding: 10px; } aside img { width: 100%; mix-blend-mode: darken; } div.content { position: relative; display: flex; flex-direction: column; grid-area: content; min-height: 0; min-width: 0; padding: 10px; max-height: 100%; border-bottom: 2px solid black; overflow-y: scroll; } table { margin: 10px; width: 100%; } thead { text-align: left; } tbody { height: 100%; overflow-y: scroll; } .code { font: 12px courier; color: blue; }<main> <header> <h2>really rad app title</h2> </header> <aside> <img src="https://thumb7.shutterstock.com/display_pic_with_logo/436114/423846025/stock-vector-example-stamp-423846025.jpg" /> <span>some contextual informations , other such sidebar-y things<span> </aside> <div class="content"> <h3>some stuffs</h3> <div> why <span class="code"><tbody></span> ignore <span class="code">overflow-y: scroll;</span>? <br /><br /> want <span class="code">div.content</span> act portal/window, around remaining fixed; want table stop before bottom of window , have scrollable body (instead of scrolling text offscreen). </div> <table> <thead><tr><th>one</th><th>two</th><th>three</th></tr></thead> <tbody> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>too content</td><td>too content</td><td>too content</td></tr> <tr><td>too content</td><td>too content</td><td>too content</td></tr> <tr><td>too content</td><td>too content</td><td>too content</td></tr> <tr><td>too content</td><td>too content</td><td>too content</td></tr> <tr><td>too content</td><td>too content</td><td>too content</td></tr> <tr><td>too content</td><td>too content</td><td>too content</td></tr> <tr><td>too content</td><td>too content</td><td>too content</td></tr> <tr><td>too content</td><td>too content</td><td>too content</td></tr> </tbody> </table> </div> </main>
seems tables have no concept of height, wrapping div , add flex-grow instead (you're using flexbox already).
main changes:
wrapped table <div class='fill'></div>
css addition div.content .fill { flex: 1; overflow-y: scroll }
related: css3 display:table, overflow-y:scroll doesn't work
html, body { margin: 0; height: 100%; } main { display: grid; grid-template-areas: 'header header' 'sidebar content'; grid-template-rows: 100px 1fr; grid-template-columns: 200px 1fr; width: 100%; height: 100%; } header { background-color: #ccc; grid-area: header; padding: 20px; } aside { background-color: #eee; grid-area: sidebar; padding: 10px; } aside img { width: 100%; mix-blend-mode: darken; } div.content { position: relative; display: flex; flex-direction: column; grid-area: content; min-height: 0; min-width: 0; padding: 10px; max-height: 100%; border-bottom: 2px solid black; overflow-y: scroll; } div.content .fill { flex: 1; overflow-y: scroll; } table { width: 100%; height: 100px; overflow: auto; } thead { text-align: left; } tbody { height: 100%; overflow-y: scroll; } .code { font: 12px courier; color: blue; }<main> <header> <h2>really rad app title</h2> </header> <aside> <img src="https://thumb7.shutterstock.com/display_pic_with_logo/436114/423846025/stock-vector-example-stamp-423846025.jpg" /> <span>some contextual informations , other such sidebar-y things<span> </aside> <div class="content"> <h3>some stuffs</h3> <div> why <span class="code"><tbody></span> ignore <span class="code">overflow-y: scroll;</span>? <br /><br /> want <span class="code">div.content</span> act portal/window, around remaining fixed; want table stop before bottom of window , have scrollable body (instead of scrolling text offscreen). </div> <div class='fill'> <table> <thead><tr><th>one</th><th>two</th><th>three</th></tr></thead> <tbody> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>some content</td><td>some content</td><td>some content</td></tr> <tr><td>too content</td><td>too content</td><td>too content</td></tr> <tr><td>too content</td><td>too content</td><td>too content</td></tr> <tr><td>too content</td><td>too content</td><td>too content</td></tr> <tr><td>too content</td><td>too content</td><td>too content</td></tr> <tr><td>too content</td><td>too content</td><td>too content</td></tr> <tr><td>too content</td><td>too content</td><td>too content</td></tr> <tr><td>too content</td><td>too content</td><td>too content</td></tr> <tr><td>too content</td><td>too content</td><td>too content</td></tr> </tbody> </table> </div> </div> </main>
Comments
Post a Comment