javascript - Horizo​​ntal Scroll 2 divs together (想使用overflow-y : scroll in body & overflow-x: scroll outside body at Table)

Question

问题陈述：

我正在<div>为（标题，正文，最后一行）的每个单元格使用 's 制作一个自定义表格。

表格（最小高度：300px）的结构如下：

标题

正文 （如果内容超过高度显示垂直滚动）

最后一行（始终可见，因此不是身体的一部分）

我正在使用flexbox 网格（col-12）来放置标题和列（col-1 ....）

现在如果有更多列并且列的总数超过 col-12，我需要溢出-x：滚动，但我需要水平滚动所有三个实体。

所以基本上我想使用：

溢出-y：滚动和溢出-x：？？？不要在正文中水平滚动

溢出-x：滚动和溢出-y：？？？不要在身体外垂直滚动。

但是我看到mdn文件说

overflow-y 属性被指定为从下面的值列表中选择的单个关键字。

如果 overflow-x 是隐藏的、滚动的或自动的，并且此属性是可见的（默认），它将隐式计算为自动。

这就是我感到困惑的地方，我制作了简单但不太好的 HTML 代码来演示我的问题。

<div style="height:200px; width: 200px; border: 1px solid red">
  <div style="height: 100%; overflow-x: scroll">
      <div style="display: flex; flex-direction: column">
        <div id="header" style="display: flex; flex-direction: row; border-bottom: solid blue">
          <span>Header 1</span>
          <span>Header 2</span>
          <span>Header 3</span>
          <span>Header 4</span>
          <span>Header 5</span>
          <span>Header 6</span>
          <span>Header 7</span>
          <span>Header 8</span>
          <span>Header 9</span>
        </div>
      </div>
      <div id="body" style="display: flex; flex-direction: column; max-height: 100px; overflow-y: scroll">
        <div style="display: flex; flex-direction: row; ">
          <span>B Cell 1</span>
          <span>B Cell 2</span>
          <span>B Cell 3</span>
          <span>B Cell 4</span>
          <span>B Cell 5</span>
          <span>B Cell 6</span>
          <span>B Cell 7</span>
          <span>B Cell 8</span>
          <span>B Cell 9</span>
        </div>
        <div style="display: flex; flex-direction: row;">
          <span>Cell 1</span>
          <span>Cell 2</span>
          <span>Cell 3</span>
          <span>Cell 4</span>
          <span>Cell 5</span>
          <span>Cell 6</span>
          <span>Cell 7</span>
          <span>Cell 8</span>
          <span>Cell 9</span>
        </div>
        <div style="display: flex; flex-direction: row;">
          <span>Cell 1</span>
          <span>Cell 2</span>
          <span>Cell 3</span>
          <span>Cell 4</span>
          <span>Cell 5</span>
          <span>Cell 6</span>
          <span>Cell 7</span>
          <span>Cell 8</span>
          <span>Cell 9</span>
        </div>
        <div style="display: flex; flex-direction: row; width: 150px">
          <span>Cell 1</span>
          <span>Cell 2</span>
          <span>Cell 3</span>
          <span>Cell 4</span>
          <span>Cell 5</span>
          <span>Cell 6</span>
          <span>Cell 7</span>
          <span>Cell 8</span>
          <span>Cell 9</span>
        </div>
        <div style="display: flex; flex-direction: row; width: 150px">
          <span>Cell 1</span>
          <span>Cell 2</span>
          <span>Cell 3</span>
          <span>Cell 4</span>
          <span>Cell 5</span>
          <span>Cell 6</span>
          <span>Cell 7</span>
          <span>Cell 8</span>
          <span>Cell 9</span>
        </div>
        <div style="display: flex; flex-direction: row; width: 150px">
          <span>Cell 1</span>
          <span>Cell 2</span>
          <span>Cell 3</span>
          <span>Cell 4</span>
          <span>Cell 5</span>
          <span>Cell 6</span>
          <span>Cell 7</span>
          <span>Cell 8</span>
          <span>Cell 9</span>
        </div>
        
      </div>
      <div id="lastRow" style="border-top: 1px solid blue">
        <div style="display: flex; flex-direction: row;">
          <span>Total Cell 1</span>
          <span>Total Cell 2</span>
          <span>Total Cell 3</span>
          <span>Total Cell 4</span>
          <span>Total Cell 5</span>
          <span>Total Cell 6</span>
          <span>Total Cell 7</span>
          <span>Total Cell 8</span>
          <span>Total Cell 9</span>
        </div>
      </div>
  </div>
</div>

所以我想要的是正文应该只有垂直滚动&当我水平滚动标题/正文/最后一行时应该一起滚动

感谢任何帮助

标签： javascripthtmlcsssass