Question

我正在尝试使用页眉，页脚和3个内容部分创建HTML布局。它适用于简单的部分;但是对于下面的代码，我得到的table2跨越了页脚：

<html>
  <body style="display: flex; flex-direction: column">
<header style="text-align: center">
  Header
</header>
<section style="display: flex; flex-direction: row; flex: 1">
  <section>
    <table style="border-style: dotted">
      <thead>
    <tr><th>Col1</th><th>Col2</th><th>Col2</th></tr>
      </thead>
      <tbody>
    <tr><td>Val1</td><td>Val2</td><td>Val3</td></tr>
      </tbody>
    </table>
    <br/>
    <table id="table2" style="border-style: dotted">
      <thead>
    <tr><th>Col1</th><th>Col2</th><th>Col2</th></tr>
      </thead>
      <tbody>
    <tr><td>Val1</td><td>Val2</td><td>Val3</td></tr>
    <tr><td>Val1</td><td>Val2</td><td>Val3</td></tr>
    <tr><td>Val1</td><td>Val2</td><td>Val3</td></tr>
    <tr><td>Val1</td><td>Val2</td><td>Val3</td></tr>
    <tr><td>Val1</td><td>Val2</td><td>Val3</td></tr>
    <tr><td>Val1</td><td>Val2</td><td>Val3</td></tr>
      </tbody>
    </table>
  </section>
  <section style="border-style: dotted">test</section>
  <section style="border-style: solid">another</section>
</section>
<footer>
  Footer
</footer>
  </body>
</html>

是否可以使table2可滚动，理想情况下只有tbody部分？

flex布局中的可滚动表

0 个答案: