主页 / coding / 问题 / 78042669
Accepted
gene b.
Asked: 2024-02-23 00:38:08 +0800 CST

表溢出-x 在具有 Flex 顶级父级的 DIV 层次结构中没有水平滚动条

  • 772

我有一个外部容器 DIV，它以 Flex ( display:flex, justify-content:center) 为中心，并且在其后代中的某个位置有一个 Table，其直接包装 DIV 有一个overflow-x:auto水平滚动条以支持水平表滚动。

示例 2 从起点和调整窗口大小时都可以正常工作。表格开始时居中，如果调整大小，一旦溢出，您将看到水平滚动条。在此示例中，表位于以 Container Flex 为中心的父级的正下方。

但我的示例 1 具有更深的层次结构，仅添加了一些 DIV。现在，当您调整大小时，表格不会发生溢出，并且不再显示滚动条。

注意：在整页上运行只能看到表 2 具有调整大小的滚动条。我需要保留 Flex 顶部父级，以便外部容器居中，但我不希望它通过overflow-x.

.tableWrapper {
  overflow-x: auto;
}

.container {
  display: flex;
  justify-content: center;
  border-left: 2px solid red;
  border-right: 2px solid red;
}
<div class="container">
  <div>
     <div>
        <div class="tableWrapper">

          <table>
             <thead>
               <th>Column 1</th>
               <th>Column 2</th>
               <th>Column 3</th>
               <th>Column 4</th>
               <th>Column 5</th>
               <th>Column 6</th>
               <th>Column 7</th>
               <th>Column 8</th>
             </thead>
             <tbody>
               <tr>
                  <td>1111111</td><td>2222222</td><td>33333333</td><td>444444444</td><td>55555555</td><td>6666666</td><td>77777777</td><td>88888888</td>
               </tr>
             </tbody>
          </table>
        </div>
    </div>
 </div>
 </div>
 
 <br/><br/><br/>
 
 <div class="container">
        <div class="tableWrapper">

          <table>
             <thead>
               <th>Column 1</th>
               <th>Column 2</th>
               <th>Column 3</th>
               <th>Column 4</th>
               <th>Column 5</th>
               <th>Column 6</th>
               <th>Column 7</th>
               <th>Column 8</th>
             </thead>
             <tbody>
               <tr>
                  <td>1111111</td><td>2222222</td><td>33333333</td><td>444444444</td><td>55555555</td><td>6666666</td><td>77777777</td><td>88888888</td>
               </tr>
             </tbody>
          </table>
    </div>
</div>

html

1 个回答

  1. Best Answer

    额外的<div>内容将增长到其内容大小，该大小太大，因此表格不再居中，并且overflow: scroll更深的元素上没有任何内容可以滚动。

    添加overflow: auto到额外的 div 以转发它。

    .tableWrapper {
  overflow-x: auto;
}

.container {
  display: flex;
  justify-content: center;
  border-left: 2px solid red;
  border-right: 2px solid red;
}

.extra-container {
  overflow: auto;
}
    <div class="container">
  <div class="extra-container">
     <div>
        <div class="tableWrapper">

          <table>
             <thead>
               <th>Column 1</th>
               <th>Column 2</th>
               <th>Column 3</th>
               <th>Column 4</th>
               <th>Column 5</th>
               <th>Column 6</th>
               <th>Column 7</th>
               <th>Column 8</th>
             </thead>
             <tbody>
               <tr>
                  <td>1111111</td><td>2222222</td><td>33333333</td><td>444444444</td><td>55555555</td><td>6666666</td><td>77777777</td><td>88888888</td>
               </tr>
             </tbody>
          </table>
        </div>
    </div>
 </div>
 </div>
 
 <br/><br/><br/>
 
 <div class="container">
        <div class="tableWrapper">

          <table>
             <thead>
               <th>Column 1</th>
               <th>Column 2</th>
               <th>Column 3</th>
               <th>Column 4</th>
               <th>Column 5</th>
               <th>Column 6</th>
               <th>Column 7</th>
               <th>Column 8</th>
             </thead>
             <tbody>
               <tr>
                  <td>1111111</td><td>2222222</td><td>33333333</td><td>444444444</td><td>55555555</td><td>6666666</td><td>77777777</td><td>88888888</td>
               </tr>
             </tbody>
          </table>
    </div>
</div>

    • 1

相关问题