Início / coding / Perguntas / 78042669
Accepted
gene b.
Asked: 2024-02-23 00:38:08 +0800 CST

Tabela overflow-x não possui barra de rolagem horizontal na hierarquia de DIVs com pai superior Flex

  • 772

Eu tenho um DIV de contêiner externo centralizado com um Flex ( display:flex, justify-content:center) e em algum lugar entre seus descendentes uma Tabela cujo DIV de wrapper imediato possui uma overflow-x:autobarra de rolagem horizontal para suportar a rolagem horizontal da tabela.

O exemplo 2 funciona corretamente desde o ponto inicial e conforme você redimensiona a janela. A tabela começa centralizada e se você redimensionar, ao transbordar, você verá a barra de rolagem horizontal. Neste exemplo, a Tabela está diretamente abaixo do pai centrado no Container Flex.

Mas tenho o Exemplo 1 com uma hierarquia mais profunda, com apenas alguns DIVs adicionados. Agora ao redimensionar, a tabela não obedece ao overflow e não mostra mais a barra de rolagem.

Nota: Execute em uma página inteira para ver apenas a Tabela 2 com a barra de rolagem no redimensionamento. Preciso manter o Flex Top Parent para que o contêiner externo fique centralizado, mas não quero que ele se aplique ao wrapper da tabela com o 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 respostas

  1. Best Answer

    O extra <div>aumentará até o tamanho do conteúdo, que é muito grande para que a tabela não fique mais centralizada e o overflow: scrollelemento mais profundo não tenha nada para rolar.

    Adicione overflow: autoao div extra para encaminhá-lo.

    .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

relate perguntas