带有自定义滚动的 Flexbox 表格布局

Question

我正在努力让我的 flexbox 布局根据需要滚动。我的要求是：

1. 固定大小的容器
2. 固定页眉和页脚
3. 表格水平滚动
4. 表格正文垂直滚动

我希望只定义以下尺寸：

1. 容器宽度/高度
2. 单元格宽度
3. 单元格内容高度（下面小提琴中的蓝色方块）。

这是可能的还是我需要定义更多的宽度/高度？在小提琴中，我还注意到当表格水平滚动时，背景颜色会丢失。如何保存？小提琴链接：

https://jsfiddle.net/talbot82/83wrktvb/6/

HTML：

<div id="container">
  <div id="header">Header</div>
  <div id="table">
    <div id="tableHeader">
      <div class="tableCell">Column1</div>
      <div class="tableCell">Column2</div>
      <div class="tableCell">Column3</div>
      <div class="tableCell">Column4</div>
    </div>
    <div id="tableBody">
      <div class="tableRow">
        <div class="tableCell">
          <div class="fixedSize"></div>
        </div>
        <div class="tableCell"></div>
        <div class="tableCell"></div>
        <div class="tableCell"></div>
      </div>
      <div class="tableRow">
        <div class="tableCell">
          <div class="fixedSize"></div>
        </div>
        <div class="tableCell"></div>
        <div class="tableCell"></div>
        <div class="tableCell"></div>
      </div>
      <div class="tableRow">
        <div class="tableCell">
          <div class="fixedSize"></div>
        </div>
        <div class="tableCell"></div>
        <div class="tableCell"></div>
        <div class="tableCell"></div>
      </div>
      <div class="tableRow">
        <div class="tableCell">
          <div class="fixedSize"></div>
        </div>
        <div class="tableCell"></div>
        <div class="tableCell"></div>
        <div class="tableCell"></div>
      </div>
      <div class="tableRow">
        <div class="tableCell">
          <div class="fixedSize"></div>
        </div>
        <div class="tableCell"></div>
        <div class="tableCell"></div>
        <div class="tableCell"></div>
      </div>
    </div>
  </div>
  <div id="footer">Footer</div>
</div>

CSS：

#container {
  width: 400px;
  height: 200px;
  display: flex;
  flex-direction: column;
}

#header, #footer {
  background-color: #666;
}

#table {
  overflow-x: scroll;
  overflow-y: hidden;
}

#tableHeader {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  background-color: #AAA;
}

#tableBody {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
}

.tableRow {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  background-color: #DDD;
}

.tableCell {
  padding: 4px;
  width: 300px;
  flex-shrink: 0;
  border: solid 1px black;
}

.fixedSize {
  width: 40px;
  height: 40px;
  background-color: blue;
}

Answer 1

您可以尝试在table 上设置两个滚动条，并将.container 的位置设置为absolute，将tableHeader 设置为sticky 和top: 0;。对于单元格背景，在tableCell 上设置background-color 并为标题单元格添加另一个background-color 的类：

#container {
  width: 400px;
  height: 200px;
  display: flex;
  flex-direction: column;
  position: absolute;
}

#header, #footer {
  background-color: #666;
}

#table {
  overflow-x: scroll;
  overflow-y: scroll;
  display: grid;
}

#tableHeader {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  position: sticky;
  top: 0;
}
.head {
  background-color: #AAA !important;
}
#tableBody {
  display: flex;
  flex-direction: column;
}

.tableRow {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  background-color: #DDD;
}
.tableRow:nth-child(odd) {
  background-color: #40E0D0;
}
.tableRow:nth-child(even) {
  background-color: violet;
}

.tableCell {
  padding: 4px;
  width: 300px;
  flex-shrink: 0;
  border: solid 1px black;
 /* background-color: #DDD;*/
}

.fixedSize {
  width: 40px;
  height: 40px;
  background-color: blue;
}

<div id="container">
  <div id="header">Header</div>
  <div id="table">
    <div id="tableHeader">
      <div class="tableCell head">Column1</div>
      <div class="tableCell head">Column2</div>
      <div class="tableCell head">Column3</div>
      <div class="tableCell head">Column4</div>
    </div>
    <div id="tableBody">
      <div class="tableRow">
        <div class="tableCell">
          <div class="fixedSize"></div>
        </div>
        <div class="tableCell"></div>
        <div class="tableCell"></div>
        <div class="tableCell"></div>
      </div>
      <div class="tableRow">
        <div class="tableCell">
          <div class="fixedSize"></div>
        </div>
        <div class="tableCell"></div>
        <div class="tableCell"></div>
        <div class="tableCell"></div>
      </div>
      <div class="tableRow">
        <div class="tableCell">
          <div class="fixedSize"></div>
        </div>
        <div class="tableCell"></div>
        <div class="tableCell"></div>
        <div class="tableCell"></div>
      </div>
      <div class="tableRow">
        <div class="tableCell">
          <div class="fixedSize"></div>
        </div>
        <div class="tableCell"></div>
        <div class="tableCell"></div>
        <div class="tableCell"></div>
      </div>
      <div class="tableRow">
        <div class="tableCell">
          <div class="fixedSize"></div>
        </div>
        <div class="tableCell"></div>
        <div class="tableCell"></div>
        <div class="tableCell"></div>
      </div>
    </div>
  </div>
  <div id="footer">Footer</div>
</div>

Answer 2

首先您需要定义哪个容器将提供滚动 - 因为那是 table 给它 overflow: scroll 以允许在两个轴上滚动其内容。

如果您需要将表头固定到位 - 使用“粘性”定位（在代码示例中注释）或绝对定位，top/left/right 0 到 tableHeader，对于 tableBody @987654326 @定位加上padding等于tableHeader高度值

那么所有放置在适当容器中的BIG DATA都应该使用overflow:visible来防止收缩以正确绘制。

#container {
  width: 400px;
  height: 200px;
  display: flex;
  flex-direction: column;
}

#header, #footer {
  background-color: #666;
}

#table {
  overflow: scroll;
}

#tableHeader {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  background-color: #AAA;
  /* uncomment it if header sticky position needed
  position:sticky;
  top:0;
  */
}

#tableBody {
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.tableRow {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  
}

.tableCell {
  padding: 4px;
  width: 300px;
  flex-shrink: 0;
  border: solid 1px black;
  background-color: #DDD;
}

.fixedSize {
  width: 40px;
  height: 40px;
  background-color: blue;
}

<div id="container">
  <div id="header">Header</div>
  <div id="table">
    <div id="tableHeader">
      <div class="tableCell">Column1</div>
      <div class="tableCell">Column2</div>
      <div class="tableCell">Column3</div>
      <div class="tableCell">Column4</div>
    </div>
    <div id="tableBody">
      <div class="tableRow">
        <div class="tableCell">
          <div class="fixedSize"></div>
        </div>
        <div class="tableCell"></div>
        <div class="tableCell"></div>
        <div class="tableCell"></div>
      </div>
      <div class="tableRow">
        <div class="tableCell">
          <div class="fixedSize"></div>
        </div>
        <div class="tableCell"></div>
        <div class="tableCell"></div>
        <div class="tableCell"></div>
      </div>
      <div class="tableRow">
        <div class="tableCell">
          <div class="fixedSize"></div>
        </div>
        <div class="tableCell"></div>
        <div class="tableCell"></div>
        <div class="tableCell"></div>
      </div>
      <div class="tableRow">
        <div class="tableCell">
          <div class="fixedSize"></div>
        </div>
        <div class="tableCell"></div>
        <div class="tableCell"></div>
        <div class="tableCell"></div>
      </div>
      <div class="tableRow">
        <div class="tableCell">
          <div class="fixedSize"></div>
        </div>
        <div class="tableCell"></div>
        <div class="tableCell"></div>
        <div class="tableCell"></div>
      </div>
    </div>
  </div>
  <div id="footer">Footer</div>
</div>

Answer 3

看看这是否符合要求。不需要像fixed 或absolute 这样的定位：

* {
  padding: 0;
  margin: 0;
}

#container {
  width: 400px;
  height: 200px;
  display: flex;
  flex-direction: column;
}

#header,
#footer {
  background-color: #666;
}

#table {
  overflow: auto;
}

#tableHeader {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background-color: #AAA;
}

#tableBody {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.tableRow {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  background-color: #DDD;
}

.tableCell {
  padding: 4px;
  width: 300px;
  flex-shrink: 0;
  border: solid 1px black;
}

.fixedSize {
  width: 40px;
  height: 40px;
  background-color: blue;
}

<div id="container">
  <div id="header">Header</div>
  <div id="table">
    <div id="tableHeader">
      <div class="tableRow">
        <div class="tableCell">Column1</div>
        <div class="tableCell">Column2</div>
        <div class="tableCell">Column3</div>
        <div class="tableCell">Column4</div>
      </div>
      <div id="tableBody">
        <div class="tableRow">
          <div class="tableCell">
            <div class="fixedSize"></div>
          </div>
          <div class="tableCell"></div>
          <div class="tableCell"></div>
          <div class="tableCell"></div>
        </div>
        <div class="tableRow">
          <div class="tableCell">
            <div class="fixedSize"></div>
          </div>
          <div class="tableCell"></div>
          <div class="tableCell"></div>
          <div class="tableCell"></div>
        </div>
        <div class="tableRow">
          <div class="tableCell">
            <div class="fixedSize"></div>
          </div>
          <div class="tableCell"></div>
          <div class="tableCell"></div>
          <div class="tableCell"></div>
        </div>
        <div class="tableRow">
          <div class="tableCell">
            <div class="fixedSize"></div>
          </div>
          <div class="tableCell"></div>
          <div class="tableCell"></div>
          <div class="tableCell"></div>
        </div>
        <div class="tableRow">
          <div class="tableCell">
            <div class="fixedSize"></div>
          </div>
          <div class="tableCell"></div>
          <div class="tableCell"></div>
          <div class="tableCell"></div>
        </div>
      </div>
    </div>
  </div>
  <div id="footer">Footer</div>
</div>