CSS Grid layout with html table in content

[kansalnishant]

I am new to html, css and jss. Any help for below is appreciated.

Requirement: A CSS Grid layout with 3 rows (header, content and footer) and 1 column

1. Header should be fixed in position
2. Content section should have a table that I am generating using d3.js with hover effect a. Table should have fixed header with scrollable content
3. Footer should be fixed in position (bottom aligned)

Help needed for: 1. Display table in content section 2. Table inserted should have a fixed header and scroll-able body

What I have achieved:

CSS Code for grid layout:

{
margin: 0;
padding: 0;
}
.wrapper {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr;
  grid-template-rows: 60px 1fr 1fr;
  grid-template-areas:"header" "content" "footer";
  grid-gap;
  }

.header {
grid-area:header
}

.content {
grid-area:content
}

.footer {
grid-area:footer
}

.wrapper div:nth-child(even){
background-color: red;
}

.wrapper div:nth-child(odd){
background-color: green;
}

CSS Code for table display:

.hoverTable {
                   border-collapse: collapse;
                   border: 2px black solid;
                   width: 100%;
                   font: 12px sans-serif;
                   text-align: center
                   padding-top: 100px;
                   }
                   .hoverTable td{
                      padding:7px; border:#4e95f4 1px solid;
                   }
                   /* Define the default color for all the table rows */
                   .hoverTable tr{
                      background: #b8d1f3;
                   }
                   /* Define the hover highlight color for the table row */
                   .hoverTable tr:hover {
                         background-color: #ffff99;
                   }

JS code for table generation:

d3.text("../data/data.csv", function(data) {
                var parsedCSV = d3.csv.parseRows(data);
                var container = d3.select("body")
                    .append("div").attr("class", "container")
                    .append("table").attr("class", "hoverTable")
                    .selectAll("tr")
                        .data(parsedCSV).enter()
                        .append("tr")
                    .selectAll("td")
                        .data(function(d) { return d; }).enter()
                        .append("td")
                        .text(function(d) { return d; });
            });

jsfiddle.net/nishant78/pfgt20kn

[PaulOB]

@kansalnishant

I am new to html, css and jss.

And you seem to have chosen one of the most complicated things to accomplish even for experts

Unfortunately I am away on holiday and cannot knock up a demo but these 2 codepens have most of the tools you will need to accomplish this:

[PaulOB]

@PaulOB

and cannot knock up a demo

I just did:

However I just knocked this up on a tiny old laptop so it will need to be checked very carefully but I’m sure someone else can now jump in and help debug and improve

It will of course also take a bit of work to linearise for mobile.

I must get back to the swimming pool now