CSS Grid layout with html table in content

HTML & CSS
,
1

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

2

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

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:

2 Likes
3

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 :slight_smile:

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

I must get back to the swimming pool now :slight_smile:

4 Likes
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.