Sign in

In this post, I am going to describe how to implement HTML Table with fixed Thead and scrollable Tbody using CSS grid.

Let's first understand CSS grid layout.

CSS Grid Layout introduces a two-dimensional grid system to CSS. Grids can be used to layout major page areas or small user interface elements.

For example- We create a grid container by declaring display: grid or display: inline-grid on an element. As soon as we do this, all direct children of that element become grid items.

HTML

<body class="grid-layout">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</body>

CSS

.grid-layout{
display: grid;
}
.grid-layout …


Looks like you did an excellent research. I am definitely going to try this out.

Anubhav

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store