Good day. CSS available
table { display: flex; display: -ms-flex; flex-flow: column; -ms-flex-flow: column; height: 97%; width: 100%; } table thead { flex: 0 0 auto; -ms-flex: 0 0 auto; width: calc(100% - 0.9em); } table tbody { flex: 1 1 auto; -ms-flex: 1 1 auto; display: block; overflow-y: scroll; } table thead, table tbody tr { display: table; table-layout: fixed; width:100%; height:20%; }
applied in the table, in order to hang the scrolling on tbody, if tbody extends beyond the window borders vertically (thead stays in place). something like the following:
<html> <head> <link href="flextbody.css" rel="stylesheet"> </head> <body> <table> <thead><tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th></tr></thead> <tbody> <tr><td>1 cell 1</td><td>cell 2</td><td>cell 3</td><td>cell 4</td><td>cell 5</td></tr>
here repeat the last tr tag, let's say, 30 times, to go beyond the screen vertically, and close
</tbody></table></body></html>
The problem is that scrolling tbody nicely appears in Chrome and Firefox, but IE (11) ignores flex. How to fix to work in IE?