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?

  • and doktyp registered? - Vasily Barbashev
  • caniuse.com/#search=flex Flex only for modern browsers! How to solve? - Do not use flex! - HamSter
  • Well, that's just written for IE11 - "partial support" - user211576
  • Yes, I didn’t just register the doctype - user211576
  • I do not understand. added <! DOCTYPE html> (HTML5), tbody scrolling stopped working in Firefox with Chrome. - user211576

0