javascript - 内容中包含 html 表格的 CSS 网格布局

Question

我是 html、css 和 jss 的新手。对以下任何帮助表示赞赏。

要求：具有 3 行（页眉、内容和页脚）和 1 列的 CSS 网格布局 1。页眉应固定在位置 2。内容部分应具有我使用 d3.js 生成的具有悬停效果的表格 a。表格应该有固定的标题和可滚动的内容 3. 页脚应该固定在适当的位置（底部对齐）

需要的帮助： 1. 在内容部分显示表格 2. 插入的表格应该有一个固定的标题和可滚动的正文

我所取得的成就：

网格布局的 CSS 代码：

{
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 代码：

.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代码：

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; });
            });

标签： javascripthtmlcsscss-grid