HTML CSS examples for CSS Widget:Table Header
Create Sticky Table Headers
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> div.table { width:100%; display:grid; grid-template-columns:2fr 2fr 2fr; grid-template-rows:2fr auto;<!-- ww w . j ava2 s.c o m--> grid-template-areas:"header header header" "content content content"; } .header { grid:2fr/2fr; } .content { display:grid; grid-template-columns:2fr 2fr 2fr; grid-template-rows:auto; grid-area:content; height:201px; overflow-y:scroll; } .content div { grid:auto-flow 2fr / repeat(auto-fill); } </style> </head> <body> <div class="table"> <div class="header"> Lorem </div> <div class="header"> Lorem i </div> <div class="header"> Lorem ipsum d </div> <div class="content"> <div> Lorem i </div> <div> Lorem </div> <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullam </div> <div> Lorem i </div> <div> Lorem </div> <div> Lorem ipsum dolor si </div> <div> Lorem i </div> <div> Lorem </div> <div> Lorem ipsum dolor si </div> <div> Lorem i </div> <div> Lorem </div> <div> Lorem ipsum dolor si </div> <div> Lorem i </div> <div> Lorem </div> <div> Lorem ipsum dolor si </div> <div> Lorem i </div> <div> Lorem </div> <div> Lorem ipsum dolor si </div> <div> Lorem i </div> <div> Lorem </div> <div> Lorem ipsum dolor si </div> <div> Lorem i </div> <div> Lorem </div> <div> Lorem ipsum dolor si </div> <div> Lorem i </div> <div> Lorem </div> <div> Lorem ipsum dolor si </div> <div> Lorem i </div> <div> Lorem </div> <div> Lorem ipsum dolor si </div> <div> Lorem i </div> <div> Lorem </div> <div> Lorem ipsum dolor si </div> </div> </div> </body> </html>