Question

我正在创建一个包含静态标题和最小宽度列的表。这需要2个滚动条：垂直和水平。

现在，垂直滚动条应该只滚动表格行，因为标题是静态的。

但是，当水平滚动时，行和标题都应滚动。我已经通过一个容器来实现这一点，该容器包含了包含overflow-x：auto的标题和正文。 body div有overflow-y：auto。

问题在于，由于正文是水平滚动div的子节点，因此垂直滚动条不在视图之外，除非您一直向右滚动。

我希望两个滚动条始终可见，但仍然只滚动其预期内容。

我创建了一个codepen来演示这个问题：

重要的部分是tableContainer和body：

#tableContainer
{
  border: 2px solid red;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
}

#body
{
  border: 2px solid green;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-width: 800px;
}

这些都产生了所需的滚动条，但是当主体内容太宽时垂直隐藏。如果Javascript中有一个可行的解决方案，我可以接受它。

Answer 1

您应该将“min-width”更改为最大宽度并摆脱“overflow-x：auto;”

https://codepen.io/morganfens/pen/vmMazK

<div id="html">
 <div id="container">
    <div id="tableContainer">
      <div id="body">
      <div id="header">
        <div class="head">Header 1</div>
        <div class="head">Header 2</div>
        <div class="head">Header 3</div>
        <div class="head">Header 4</div>
      </div>
        <table id="table">
    <tr><td>R1C1</td><td>R1C2</td><td>R1C3</td><td>R1C4</td</tr>
    <tr><td>R2C1</td><td>R2C2</td><td>R2C3</td><td>R2C4</td></tr>
    <tr><td>R3C1</td><td>R3C2</td><td>R3C3</td><td>R3C4</td></tr>
    <tr><td>R4C1</td><td>R4C2</td><td>R4C3</td><td>R4C4</td></tr>
    <tr><td>R5C1</td><td>R5C2</td><td>R5C3</td><td>R5C4</td></tr>
    <tr><td>R6C1</td><td>R6C2</td><td>R6C3</td><td>R6C4</td></tr>
    <tr><td>R7C1</td><td>R7C2</td><td>R7C3</td><td>R7C4</td></tr>
    <tr><td>R8C1</td><td>R8C2</td><td>R8C3</td><td>R8C4</td></tr>
    <tr><td>R9C1</td><td>R9C2</td><td>R9C3</td><td>R9C4</td></tr>
    <tr><td>R10C1</td><td>R10C2</td><td>R10C3</td><td>R10C4</td></tr>
    <tr><td>R11C1</td><td>R11C2</td><td>R11C3</td><td>R11C4</td></tr>
    <tr><td>R12C1</td><td>R12C2</td><td>R12C3</td><td>R12C4</td></tr>
    <tr><td>R13C1</td><td>R13C2</td><td>R13C3</td><td>R13C4</td></tr>
    <tr><td>R14C1</td><td>R14C2</td><td>R14C3</td><td>R14C4</td></tr>
    <tr><td>R15C1</td><td>R15C2</td><td>R15C3</td><td>R15C4</td></tr>
    <tr><td>R16C1</td><td>R16C2</td><td>R16C3</td><td>R16C4</td></tr>
    <tr><td>R17C1</td><td>R17C2</td><td>R17C3</td><td>R17C4</td></tr>
    <tr><td>R18C1</td><td>R18C2</td><td>R18C3</td><td>R18C4</td></tr>
    <tr><td>R19C1</td><td>R19C2</td><td>R19C3</td><td>R19C4</td></tr>
    <tr><td>R20C1</td><td>R20C2</td><td>R20C3</td><td>R20C4</td></tr>
    <tr><td>R21C1</td><td>R21C2</td><td>R21C3</td><td>R21C4</td></tr>
    <tr><td>R22C1</td><td>R22C2</td><td>R22C3</td><td>R22C4</td></tr>  
    </table>
  </div>
    </div>
    <div id="footer">
      The footer
    </div>
  </div>
</div>

<强> CSS

#tableContainer
{
  border: 2px solid red;
  display: flex;
  flex-direction: column;
}

#body
{
  border: 2px solid green;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-width: 800px;
}

#header{
  display: flex;
  flex: row;
  box-sizing: border-box;
  padding: 5px;
  min-width: 800px;
  margin-bottom:15px;
 }

水平滚动时，保持垂直滚动条在视图中

1 个答案: