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
- Header should be fixed in position
- 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
- 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; });
});