带有100%宽度的overflow-x div中固定表头

9

我无法将一个固定在顶部的表头和一个带有overflow-x: auto属性的div一起使用。

目标是使包含在div中的具有多个列的表能够水平滚动(div宽度为100%),并且在垂直滚动时将表的表头固定在页面顶部。

<div style=“overflow-x: auto”>
    <table class=“table”>
        <thead class=“sticky”>
            <tr>
                <td>Col 1</td>
                <td>Col 2</td>
                ...
            </tr>
         </thead>
    </table>
</div>

我只能选择以下两种方式之一:

  1. 将具有溢出行的粘性标题
  2. 或将溢出适配到包含表格的div中,但滚动表头时不固定在顶部!

这个表格本身使用Bootstrap的“表格”类。

肯定有一种方法可以实现这个,只是似乎每当我添加overflow-x来解决表格的水平溢出时,表格标题的粘性就消失了。

仅使用sticky header class来进行thead操作,表头一旦滚动超过表格,就会固定在页面顶部。

sticky tr > th {
    position: sticky;
    top: 0;
}

为什么在包含具有固定表头的表的div中添加“overflow-x: auto”样式会使表头不再固定?
如何解决这个问题?
编辑:这里是一个示例链接:Fiddle
当前,overflow-x处理表格的溢出,在容器的宽度(100%)之后隐藏它,但是如果您滚动到标题之后,什么也不发生。注释掉d1类上第37行的overflow-x: auto;,您可以在向下滚动页面时实现所需的固定表头,但现在表格扩展到超出容器的宽度。
如何同时隐藏表格的溢出同时保持表头固定在页面顶部?

1
你是不是想说 position:sticky;fixed 有另外一个用途。在这里可以找到一个工作示例:https://codepen.io/gc-nomade/pen/vaNoEQ。参考链接:https://dev59.com/C5bfa4cB1Zd3GeqPy86A#3707344。 - G-Cyrillus
抱歉,是的,我指的是“sticky”。我在手机上写的,所以很麻烦,一直在想“fixed”头部,但我的类确实反映了“sticky”。 - bretonics
@G-Cyrillus,我使用Fiddle编辑了这篇文章,采用了您的工作示例并进行了一些修改以帮助澄清我想要实现的内容:https://jsfiddle.net/bretonics/j3s9nkae/15/。您能帮忙吗?谢谢! - bretonics
“.d1 {max-height: 100%;}”需要其父元素设置高度来计算,否则高度将为100%的null。尝试使用100vh或100px进行设置并查看其工作情况。您还可以在body上设置高度,然后使用Bootstrap类:https://jsfiddle.net/ue5j6zkb/ - G-Cyrillus
你找到解决方案了吗? - coinhndp
1个回答

2
也许我错过了你的确切意图,但以下代码满足以下要求:
  • 带有“列标题”和“行标题”的表格
  • 只要表格在视图中,行标题就会保持粘性
  • 只要表格在视图中,列标题就会保持粘性
  • x和y滚动与行和列标题一起工作,相对于行和列正确定位
  • 当表格完全滚出视图时,粘性标题也会消失
  • 没有JavaScript,只有基本CSS
抱歉,但我真的不明白你的片段/小样试图做什么,有z指数等,以及多个HTML级别。
以下代码的关键是将适当的粘性元素与适当的滚动容器匹配。
列标题粘性属于表格滚动容器,即表格中的第一个tr垂直粘着在表格中。
行标题不是一个元素。它是每行中的粘性td,即每行中的第一个td在每个tr中水平粘着。

table {
    overflow-y: auto;
}

tr:nth-of-type(1) {
    position: sticky;
    top: 5px;
    background: cyan;
}

tr:not(:nth-of-type(1)) {
    overlflow-x: auto;
}

td:nth-of-type(1) {
    position: sticky;
    left: 5px;
    background: cyan;
}
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<p>Some text before</p>
<div>
<table>
<tr><th></th><th>Col 1</th><th>Col 2</th><th>Col 3</th><th>Col 4</th><th>Col 5</th><th>Col 6</th><th>Col 7</th><th>Col 8</th><th>Col 9</th><th>Col 10</th><th>Col 11</th><th>Col 12</th><th>Col 13</th><th>Col 14</th><th>Col 15</th><th>Col 16</th><th>Col 17</th><th>Col 18</th><th>Col 19</th><th>Col 20</th><th>Col 21</th><th>Col 22</th><th>Col 23</th><th>Col 24</th><th>Col 25</th><th>Col 26</th><th>Col 27</th><th>Col 28</th><th>Col 29</th><th>Col 30</th></tr>
<tr><td>Row 1</td><td>Lorem</td><td>ipsum</td><td>dolor</td><td>sit</td><td>amet,</td><td>consectetur</td><td>adipiscing</td><td>elit,</td><td>sed</td><td>do</td><td>eiusmod</td><td>tempor</td><td>incididunt</td><td>ut</td><td>labore</td><td>et</td><td>dolore</td><td>magna</td><td>aliqua.</td><td>Ut</td><td>enim</td><td>ad</td><td>minim</td><td>veniam,</td><td>quis</td><td>nostrud</td><td>exercitation</td><td>ullamco</td><td>laboris</td><td>nisi</td></tr>
<tr><td>Row 2</td><td>ut</td><td>aliquip</td><td>ex</td><td>ea</td><td>commodo</td><td>consequat.</td><td>Duis</td><td>aute</td><td>irure</td><td>dolor</td><td>in</td><td>reprehenderit</td><td>in</td><td>voluptate</td><td>velit</td><td>esse</td><td>cillum</td><td>dolore</td><td>eu</td><td>fugiat</td><td>nulla</td><td>pariatur.</td><td>Excepteur</td><td>sint</td><td>occaecat</td><td>cupidatat</td><td>non</td><td>proident,</td><td>sunt</td><td>in</td></tr>
<tr><td>Row 3</td><td>culpa</td><td>qui</td><td>officia</td><td>deserunt</td><td>mollit</td><td>anim</td><td>id</td><td>est</td><td>laborum</td><td>Lorem</td><td>ipsum</td><td>dolor</td><td>sit</td><td>amet,</td><td>consectetur</td><td>adipiscing</td><td>elit,</td><td>sed</td><td>do</td><td>eiusmod</td><td>tempor</td><td>incididunt</td><td>ut</td><td>labore</td><td>et</td><td>dolore</td><td>magna</td><td>aliqua.</td><td>Ut</td><td>enim</td></tr>
<tr><td>Row 4</td><td>ad</td><td>minim</td><td>veniam,</td><td>quis</td><td>nostrud</td><td>exercitation</td><td>ullamco</td><td>laboris</td><td>nisi</td><td>ut</td><td>aliquip</td><td>ex</td><td>ea</td><td>commodo</td><td>consequat.</td><td>Duis</td><td>aute</td><td>irure</td><td>dolor</td><td>in</td><td>reprehenderit</td><td>in</td><td>voluptate</td><td>velit</td><td>esse</td><td>cillum</td><td>dolore</td><td>eu</td><td>fugiat</td><td>nulla</td></tr>
<tr><td>Row 5</td><td>pariatur.</td><td>Excepteur</td><td>sint</td><td>occaecat</td><td>cupidatat</td><td>non</td><td>proident,</td><td>sunt</td><td>in</td><td>culpa</td><td>qui</td><td>officia</td><td>deserunt</td><td>mollit</td><td>anim</td><td>id</td><td>est</td><td>laborum</td><td>Lorem</td><td>ipsum</td><td>dolor</td><td>sit</td><td>amet,</td><td>consectetur</td><td>adipiscing</td><td>elit,</td><td>sed</td><td>do</td><td>eiusmod</td><td>tempor</td></tr>
<tr><td>Row 6</td><td>incididunt</td><td>ut</td><td>labore</td><td>et</td><td>dolore</td><td>magna</td><td>aliqua.</td><td>Ut</td><td>enim</td><td>ad</td><td>minim</td><td>veniam,</td><td>quis</td><td>nostrud</td><td>exercitation</td><td>ullamco</td><td>laboris</td><td>nisi</td><td>ut</td><td>aliquip</td><td>ex</td><td>ea</td><td>commodo</td><td>consequat.</td><td>Duis</td><td>aute</td><td>irure</td><td>dolor</td><td>in</td><td>reprehenderit</td></tr>
<tr><td>Row 7</td><td>in</td><td>voluptate</td><td>velit</td><td>esse</td><td>cillum</td><td>dolore</td><td>eu</td><td>fugiat</td><td>nulla</td><td>pariatur.</td><td>Excepteur</td><td>sint</td><td>occaecat</td><td>cupidatat</td><td>non</td><td>proident,</td><td>sunt</td><td>in</td><td>culpa</td><td>qui</td><td>officia</td><td>deserunt</td><td>mollit</td><td>anim</td><td>id</td><td>est</td><td>laborum</td><td>Lorem</td><td>ipsum</td><td>dolor</td></tr>
<tr><td>Row 8</td><td>sit</td><td>amet,</td><td>consectetur</td><td>adipiscing</td><td>elit,</td><td>sed</td><td>do</td><td>eiusmod</td><td>tempor</td><td>incididunt</td><td>ut</td><td>labore</td><td>et</td><td>dolore</td><td>magna</td><td>aliqua.</td><td>Ut</td><td>enim</td><td>ad</td><td>minim</td><td>veniam,</td><td>quis</td><td>nostrud</td><td>exercitation</td><td>ullamco</td><td>laboris</td><td>nisi</td><td>ut</td><td>aliquip</td><td>ex</td></tr>
<tr><td>Row 9</td><td>ea</td><td>commodo</td><td>consequat.</td><td>Duis</td><td>aute</td><td>irure</td><td>dolor</td><td>in</td><td>reprehenderit</td><td>in</td><td>voluptate</td><td>velit</td><td>esse</td><td>cillum</td><td>dolore</td><td>eu</td><td>fugiat</td><td>nulla</td><td>pariatur.</td><td>Excepteur</td><td>sint</td><td>occaecat</td><td>cupidatat</td><td>non</td><td>proident,</td><td>sunt</td><td>in</td><td>culpa</td><td>qui</td><td>officia</td></tr>
<tr><td>Row 10</td><td>deserunt</td><td>mollit</td><td>anim</td><td>id</td><td>est</td><td>laborum</td><td>Lorem</td><td>ipsum</td><td>dolor</td><td>sit</td><td>amet,</td><td>consectetur</td><td>adipiscing</td><td>elit,</td><td>sed</td><td>do</td><td>eiusmod</td><td>tempor</td><td>incididunt</td><td>ut</td><td>labore</td><td>et</td><td>dolore</td><td>magna</td><td>aliqua.</td><td>Ut</td><td>enim</td><td>ad</td><td>minim</td><td>veniam,</td></tr>
<tr><td>Row 11</td><td>quis</td><td>nostrud</td><td>exercitation</td><td>ullamco</td><td>laboris</td><td>nisi</td><td>ut</td><td>aliquip</td><td>ex</td><td>ea</td><td>commodo</td><td>consequat.</td><td>Duis</td><td>aute</td><td>irure</td><td>dolor</td><td>in</td><td>reprehenderit</td><td>in</td><td>voluptate</td><td>velit</td><td>esse</td><td>cillum</td><td>dolore</td><td>eu</td><td>fugiat</td><td>nulla</td><td>pariatur.</td><td>Excepteur</td><td>sint</td></tr>
<tr><td>Row 12</td><td>occaecat</td><td>cupidatat</td><td>non</td><td>proident,</td><td>sunt</td><td>in</td><td>culpa</td><td>qui</td><td>officia</td><td>deserunt</td><td>mollit</td><td>anim</td><td>id</td><td>est</td><td>laborum</td><td>Lorem</td><td>ipsum</td><td>dolor</td><td>sit</td><td>amet,</td><td>consectetur</td><td>adipiscing</td><td>elit,</td><td>sed</td><td>do</td><td>eiusmod</td><td>tempor</td><td>incididunt</td><td>ut</td><td>labore</td></tr>
<tr><td>Row 13</td><td>et</td><td>dolore</td><td>magna</td><td>aliqua.</td><td>Ut</td><td>enim</td><td>ad</td><td>minim</td><td>veniam,</td><td>quis</td><td>nostrud</td><td>exercitation</td><td>ullamco</td><td>laboris</td><td>nisi</td><td>ut</td><td>aliquip</td><td>ex</td><td>ea</td><td>commodo</td><td>consequat.</td><td>Duis</td><td>aute</td><td>irure</td><td>dolor</td><td>in</td><td>reprehenderit</td><td>in</td><td>voluptate</td><td>velit</td></tr>
<tr><td>Row 14</td><td>esse</td><td>cillum</td><td>dolore</td><td>eu</td><td>fugiat</td><td>nulla</td><td>pariatur.</td><td>Excepteur</td><td>sint</td><td>occaecat</td><td>cupidatat</td><td>non</td><td>proident,</td><td>sunt</td><td>in</td><td>culpa</td><td>qui</td><td>officia</td><td>deserunt</td><td>mollit</td><td>anim</td><td>id</td><td>est</td><td>laborum</td><td>Lorem</td><td>ipsum</td><td>dolor</td><td>sit</td><td>amet,</td><td>consectetur</td></tr>
<tr><td>Row 15</td><td>adipiscing</td><td>elit,</td><td>sed</td><td>do</td><td>eiusmod</td><td>tempor</td><td>incididunt</td><td>ut</td><td>labore</td><td>et</td><td>dolore</td><td>magna</td><td>aliqua.</td><td>Ut</td><td>enim</td><td>ad</td><td>minim</td><td>veniam,</td><td>quis</td><td>nostrud</td><td>exercitation</td><td>ullamco</td><td>laboris</td><td>nisi</td><td>ut</td><td>aliquip</td><td>ex</td><td>ea</td><td>commodo</td><td>consequat.</td></tr>
<tr><td>Row 16</td><td>Duis</td><td>aute</td><td>irure</td><td>dolor</td><td>in</td><td>reprehenderit</td><td>in</td><td>voluptate</td><td>velit</td><td>esse</td><td>cillum</td><td>dolore</td><td>eu</td><td>fugiat</td><td>nulla</td><td>pariatur.</td><td>Excepteur</td><td>sint</td><td>occaecat</td><td>cupidatat</td><td>non</td><td>proident,</td><td>sunt</td><td>in</td><td>culpa</td><td>qui</td><td>officia</td><td>deserunt</td><td>mollit</td><td>anim</td></tr>
<tr><td>Row 17</td><td>Lorem</td><td>ipsum</td><td>dolor</td><td>sit</td><td>amet,</td><td>consectetur</td><td>adipiscing</td><td>elit,</td><td>sed</td><td>do</td><td>eiusmod</td><td>tempor</td><td>incididunt</td><td>ut</td><td>labore</td><td>et</td><td>dolore</td><td>magna</td><td>aliqua.</td><td>Ut</td><td>enim</td><td>ad</td><td>minim</td><td>veniam,</td><td>quis</td><td>nostrud</td><td>exercitation</td><td>ullamco</td><td>laboris</td><td>nisi</td></tr>
<tr><td>Row 18</td><td>ut</td><td>aliquip</td><td>ex</td><td>ea</td><td>commodo</td><td>consequat.</td><td>Duis</td><td>aute</td><td>irure</td><td>dolor</td><td>in</td><td>reprehenderit</td><td>in</td><td>voluptate</td><td>velit</td><td>esse</td><td>cillum</td><td>dolore</td><td>eu</td><td>fugiat</td><td>nulla</td><td>pariatur.</td><td>Excepteur</td><td>sint</td><td>occaecat</td><td>cupidatat</td><td>non</td><td>proident,</td><td>sunt</td><td>in</td></tr>
<tr><td>Row 19</td><td>culpa</td><td>qui</td><td>officia</td><td>deserunt</td><td>mollit</td><td>anim</td><td>id</td><td>est</td><td>laborum</td><td>Lorem</td><td>ipsum</td><td>dolor</td><td>sit</td><td>amet,</td><td>consectetur</td><td>adipiscing</td><td>elit,</td><td>sed</td><td>do</td><td>eiusmod</td><td>tempor</td><td>incididunt</td><td>ut</td><td>labore</td><td>et</td><td>dolore</td><td>magna</td><td>aliqua.</td><td>Ut</td><td>enim</td></tr>
<tr><td>Row 20</td><td>ad</td><td>minim</td><td>veniam,</td><td>quis</td><td>nostrud</td><td>exercitation</td><td>ullamco</td><td>laboris</td><td>nisi</td><td>ut</td><td>aliquip</td><td>ex</td><td>ea</td><td>commodo</td><td>consequat.</td><td>Duis</td><td>aute</td><td>irure</td><td>dolor</td><td>in</td><td>reprehenderit</td><td>in</td><td>voluptate</td><td>velit</td><td>esse</td><td>cillum</td><td>dolore</td><td>eu</td><td>fugiat</td><td>nulla</td></tr>
<tr><td>Row 21</td><td>pariatur.</td><td>Excepteur</td><td>sint</td><td>occaecat</td><td>cupidatat</td><td>non</td><td>proident,</td><td>sunt</td><td>in</td><td>culpa</td><td>qui</td><td>officia</td><td>deserunt</td><td>mollit</td><td>anim</td><td>id</td><td>est</td><td>laborum</td><td>Lorem</td><td>ipsum</td><td>dolor</td><td>sit</td><td>amet,</td><td>consectetur</td><td>adipiscing</td><td>elit,</td><td>sed</td><td>do</td><td>eiusmod</td><td>tempor</td></tr>
<tr><td>Row 22</td><td>incididunt</td><td>ut</td><td>labore</td><td>et</td><td>dolore</td><td>magna</td><td>aliqua.</td><td>Ut</td><td>enim</td><td>ad</td><td>minim</td><td>veniam,</td><td>quis</td><td>nostrud</td><td>exercitation</td><td>ullamco</td><td>laboris</td><td>nisi</td><td>ut</td><td>aliquip</td><td>ex</td><td>ea</td><td>commodo</td><td>consequat.</td><td>Duis</td><td>aute</td><td>irure</td><td>dolor</td><td>in</td><td>reprehenderit</td></tr>
<tr><td>Row 23</td><td>in</td><td>voluptate</td><td>velit</td><td>esse</td><td>cillum</td><td>dolore</td><td>eu</td><td>fugiat</td><td>nulla</td><td>pariatur.</td><td>Excepteur</td><td>sint</td><td>occaecat</td><td>cupidatat</td><td>non</td><td>proident,</td><td>sunt</td><td>in</td><td>culpa</td><td>qui</td><td>officia</td><td>deserunt</td><td>mollit</td><td>anim</td><td>id</td><td>est</td><td>laborum</td><td>Lorem</td><td>ipsum</td><td>dolor</td></tr>
<tr><td>Row 24</td><td>sit</td><td>amet,</td><td>consectetur</td><td>adipiscing</td><td>elit,</td><td>sed</td><td>do</td><td>eiusmod</td><td>tempor</td><td>incididunt</td><td>ut</td><td>labore</td><td>et</td><td>dolore</td><td>magna</td><td>aliqua.</td><td>Ut</td><td>enim</td><td>ad</td><td>minim</td><td>veniam,</td><td>quis</td><td>nostrud</td><td>exercitation</td><td>ullamco</td><td>laboris</td><td>nisi</td><td>ut</td><td>aliquip</td><td>ex</td></tr>
<tr><td>Row 25</td><td>ea</td><td>commodo</td><td>consequat.</td><td>Duis</td><td>aute</td><td>irure</td><td>dolor</td><td>in</td><td>reprehenderit</td><td>in</td><td>voluptate</td><td>velit</td><td>esse</td><td>cillum</td><td>dolore</td><td>eu</td><td>fugiat</td><td>nulla</td><td>pariatur.</td><td>Excepteur</td><td>sint</td><td>occaecat</td><td>cupidatat</td><td>non</td><td>proident,</td><td>sunt</td><td>in</td><td>culpa</td><td>qui</td><td>officia</td></tr>
<tr><td>Row 26</td><td>deserunt</td><td>mollit</td><td>anim</td><td>id</td><td>est</td><td>laborum</td><td>Lorem</td><td>ipsum</td><td>dolor</td><td>sit</td><td>amet,</td><td>consectetur</td><td>adipiscing</td><td>elit,</td><td>sed</td><td>do</td><td>eiusmod</td><td>tempor</td><td>incididunt</td><td>ut</td><td>labore</td><td>et</td><td>dolore</td><td>magna</td><td>aliqua.</td><td>Ut</td><td>enim</td><td>ad</td><td>minim</td><td>veniam,</td></tr>
<tr><td>Row 27</td><td>quis</td><td>nostrud</td><td>exercitation</td><td>ullamco</td><td>laboris</td><td>nisi</td><td>ut</td><td>aliquip</td><td>ex</td><td>ea</td><td>commodo</td><td>consequat.</td><td>Duis</td><td>aute</td><td>irure</td><td>dolor</td><td>in</td><td>reprehenderit</td><td>in</td><td>voluptate</td><td>velit</td><td>esse</td><td>cillum</td><td>dolore</td><td>eu</td><td>fugiat</td><td>nulla</td><td>pariatur.</td><td>Excepteur</td><td>sint</td></tr>
<tr><td>Row 28</td><td>occaecat</td><td>cupidatat</td><td>non</td><td>proident,</td><td>sunt</td><td>in</td><td>culpa</td><td>qui</td><td>officia</td><td>deserunt</td><td>mollit</td><td>anim</td><td>id</td><td>est</td><td>laborum</td><td>Lorem</td><td>ipsum</td><td>dolor</td><td>sit</td><td>amet,</td><td>consectetur</td><td>adipiscing</td><td>elit,</td><td>sed</td><td>do</td><td>eiusmod</td><td>tempor</td><td>incididunt</td><td>ut</td><td>labore</td></tr>
<tr><td>Row 29</td><td>et</td><td>dolore</td><td>magna</td><td>aliqua.</td><td>Ut</td><td>enim</td><td>ad</td><td>minim</td><td>veniam,</td><td>quis</td><td>nostrud</td><td>exercitation</td><td>ullamco</td><td>laboris</td><td>nisi</td><td>ut</td><td>aliquip</td><td>ex</td><td>ea</td><td>commodo</td><td>consequat.</td><td>Duis</td><td>aute</td><td>irure</td><td>dolor</td><td>in</td><td>reprehenderit</td><td>in</td><td>voluptate</td><td>velit</td></tr>
<tr><td>Row 30</td><td>esse</td><td>cillum</td><td>dolore</td><td>eu</td><td>fugiat</td><td>nulla</td><td>pariatur.</td><td>Excepteur</td><td>sint</td><td>occaecat</td><td>cupidatat</td><td>non</td><td>proident,</td><td>sunt</td><td>in</td><td>culpa</td><td>qui</td><td>officia</td><td>deserunt</td><td>mollit</td><td>anim</td><td>id</td><td>est</td><td>laborum</td><td>Lorem</td><td>ipsum</td><td>dolor</td><td>sit</td><td>amet,</td><td>consectetur</td></tr>
<tr><td>Row 31</td><td>adipiscing</td><td>elit,</td><td>sed</td><td>do</td><td>eiusmod</td><td>tempor</td><td>incididunt</td><td>ut</td><td>labore</td><td>et</td><td>dolore</td><td>magna</td><td>aliqua.</td><td>Ut</td><td>enim</td><td>ad</td><td>minim</td><td>veniam,</td><td>quis</td><td>nostrud</td><td>exercitation</td><td>ullamco</td><td>laboris</td><td>nisi</td><td>ut</td><td>aliquip</td><td>ex</td><td>ea</td><td>commodo</td><td>consequat.</td></tr>
<tr><td>Row 32</td><td>Duis</td><td>aute</td><td>irure</td><td>dolor</td><td>in</td><td>reprehenderit</td><td>in</td><td>voluptate</td><td>velit</td><td>esse</td><td>cillum</td><td>dolore</td><td>eu</td><td>fugiat</td><td>nulla</td><td>pariatur.</td><td>Excepteur</td><td>sint</td><td>occaecat</td><td>cupidatat</td><td>non</td><td>proident,</td><td>sunt</td><td>in</td><td>culpa</td><td>qui</td><td>officia</td><td>deserunt</td><td>mollit</td><td>anim</td></tr>
<tr><td>Row 33</td><td>Lorem</td><td>ipsum</td><td>dolor</td><td>sit</td><td>amet,</td><td>consectetur</td><td>adipiscing</td><td>elit,</td><td>sed</td><td>do</td><td>eiusmod</td><td>tempor</td><td>incididunt</td><td>ut</td><td>labore</td><td>et</td><td>dolore</td><td>magna</td><td>aliqua.</td><td>Ut</td><td>enim</td><td>ad</td><td>minim</td><td>veniam,</td><td>quis</td><td>nostrud</td><td>exercitation</td><td>ullamco</td><td>laboris</td><td>nisi</td></tr>
<tr><td>Row 34</td><td>ut</td><td>aliquip</td><td>ex</td><td>ea</td><td>commodo</td><td>consequat.</td><td>Duis</td><td>aute</td><td>irure</td><td>dolor</td><td>in</td><td>reprehenderit</td><td>in</td><td>voluptate</td><td>velit</td><td>esse</td><td>cillum</td><td>dolore</td><td>eu</td><td>fugiat</td><td>nulla</td><td>pariatur.</td><td>Excepteur</td><td>sint</td><td>occaecat</td><td>cupidatat</td><td>non</td><td>proident,</td><td>sunt</td><td>in</td></tr>
<tr><td>Row 35</td><td>culpa</td><td>qui</td><td>officia</td><td>deserunt</td><td>mollit</td><td>anim</td><td>id</td><td>est</td><td>laborum</td><td>Lorem</td><td>ipsum</td><td>dolor</td><td>sit</td><td>amet,</td><td>consectetur</td><td>adipiscing</td><td>elit,</td><td>sed</td><td>do</td><td>eiusmod</td><td>tempor</td><td>incididunt</td><td>ut</td><td>labore</td><td>et</td><td>dolore</td><td>magna</td><td>aliqua.</td><td>Ut</td><td>enim</td></tr>
<tr><td>Row 36</td><td>ad</td><td>minim</td><td>veniam,</td><td>quis</td><td>nostrud</td><td>exercitation</td><td>ullamco</td><td>laboris</td><td>nisi</td><td>ut</td><td>aliquip</td><td>ex</td><td>ea</td><td>commodo</td><td>consequat.</td><td>Duis</td><td>aute</td><td>irure</td><td>dolor</td><td>in</td><td>reprehenderit</td><td>in</td><td>voluptate</td><td>velit</td><td>esse</td><td>cillum</td><td>dolore</td><td>eu</td><td>fugiat</td><td>nulla</td></tr>
<tr><td>Row 37</td><td>pariatur.</td><td>Excepteur</td><td>sint</td><td>occaecat</td><td>cupidatat</td><td>non</td><td>proident,</td><td>sunt</td><td>in</td><td>culpa</td><td>qui</td><td>officia</td><td>deserunt</td><td>mollit</td><td>anim</td><td>id</td><td>est</td><td>laborum</td><td>Lorem</td><td>ipsum</td><td>dolor</td><td>sit</td><td>amet,</td><td>consectetur</td><td>adipiscing</td><td>elit,</td><td>sed</td><td>do</td><td>eiusmod</td><td>tempor</td></tr>
<tr><td>Row 38</td><td>incididunt</td><td>ut</td><td>labore</td><td>et</td><td>dolore</td><td>magna</td><td>aliqua.</td><td>Ut</td><td>enim</td><td>ad</td><td>minim</td><td>veniam,</td><td>quis</td><td>nostrud</td><td>exercitation</td><td>ullamco</td><td>laboris</td><td>nisi</td><td>ut</td><td>aliquip</td><td>ex</td><td>ea</td><td>commodo</td><td>consequat.</td><td>Duis</td><td>aute</td><td>irure</td><td>dolor</td><td>in</td><td>reprehenderit</td></tr>
<tr><td>Row 39</td><td>in</td><td>voluptate</td><td>velit</td><td>esse</td><td>cillum</td><td>dolore</td><td>eu</td><td>fugiat</td><td>nulla</td><td>pariatur.</td><td>Excepteur</td><td>sint</td><td>occaecat</td><td>cupidatat</td><td>non</td><td>proident,</td><td>sunt</td><td>in</td><td>culpa</td><td>qui</td><td>officia</td><td>deserunt</td><td>mollit</td><td>anim</td><td>id</td><td>est</td><td>laborum</td><td>Lorem</td><td>ipsum</td><td>dolor</td></tr>
<tr><td>Row 40</td><td>sit</td><td>amet,</td><td>consectetur</td><td>adipiscing</td><td>elit,</td><td>sed</td><td>do</td><td>eiusmod</td><td>tempor</td><td>incididunt</td><td>ut</td><td>labore</td><td>et</td><td>dolore</td><td>magna</td><td>aliqua.</td><td>Ut</td><td>enim</td><td>ad</td><td>minim</td><td>veniam,</td><td>quis</td><td>nostrud</td><td>exercitation</td><td>ullamco</td><td>laboris</td><td>nisi</td><td>ut</td><td>aliquip</td><td>ex</td></tr>
<tr><td>Row 41</td><td>ea</td><td>commodo</td><td>consequat.</td><td>Duis</td><td>aute</td><td>irure</td><td>dolor</td><td>in</td><td>reprehenderit</td><td>in</td><td>voluptate</td><td>velit</td><td>esse</td><td>cillum</td><td>dolore</td><td>eu</td><td>fugiat</td><td>nulla</td><td>pariatur.</td><td>Excepteur</td><td>sint</td><td>occaecat</td><td>cupidatat</td><td>non</td><td>proident,</td><td>sunt</td><td>in</td><td>culpa</td><td>qui</td><td>officia</td></tr>
<tr><td>Row 42</td><td>deserunt</td><td>mollit</td><td>anim</td><td>id</td><td>est</td><td>laborum</td><td>Lorem</td><td>ipsum</td><td>dolor</td><td>sit</td><td>amet,</td><td>consectetur</td><td>adipiscing</td><td>elit,</td><td>sed</td><td>do</td><td>eiusmod</td><td>tempor</td><td>incididunt</td><td>ut</td><td>labore</td><td>et</td><td>dolore</td><td>magna</td><td>aliqua.</td><td>Ut</td><td>enim</td><td>ad</td><td>minim</td><td>veniam,</td></tr>
<tr><td>Row 43</td><td>quis</td><td>nostrud</td><td>exercitation</td><td>ullamco</td><td>laboris</td><td>nisi</td><td>ut</td><td>aliquip</td><td>ex</td><td>ea</td><td>commodo</td><td>consequat.</td><td>Duis</td><td>aute</td><td>irure</td><td>dolor</td><td>in</td><td>reprehenderit</td><td>in</td><td>voluptate</td><td>velit</td><td>esse</td><td>cillum</td><td>dolore</td><td>eu</td><td>fugiat</td><td>nulla</td><td>pariatur.</td><td>Excepteur</td><td>sint</td></tr>
<tr><td>Row 44</td><td>occaecat</td><td>cupidatat</td><td>non</td><td>proident,</td><td>sunt</td><td>in</td><td>culpa</td><td>qui</td><td>officia</td><td>deserunt</td><td>mollit</td><td>anim</td><td>id</td><td>est</td><td>laborum</td><td>Lorem</td><td>ipsum</td><td>dolor</td><td>sit</td><td>amet,</td><td>consectetur</td><td>adipiscing</td><td>elit,</td><td>sed</td><td>do</td><td>eiusmod</td><td>tempor</td><td>incididunt</td><td>ut</td><td>labore</td></tr>
<tr><td>Row 45</td><td>et</td><td>dolore</td><td>magna</td><td>aliqua.</td><td>Ut</td><td>enim</td><td>ad</td><td>minim</td><td>veniam,</td><td>quis</td><td>nostrud</td><td>exercitation</td><td>ullamco</td><td>laboris</td><td>nisi</td><td>ut</td><td>aliquip</td><td>ex</td><td>ea</td><td>commodo</td><td>consequat.</td><td>Duis</td><td>aute</td><td>irure</td><td>dolor</td><td>in</td><td>reprehenderit</td><td>in</td><td>voluptate</td><td>velit</td></tr>
<tr><td>Row 46</td><td>esse</td><td>cillum</td><td>dolore</td><td>eu</td><td>fugiat</td><td>nulla</td><td>pariatur.</td><td>Excepteur</td><td>sint</td><td>occaecat</td><td>cupidatat</td><td>non</td><td>proident,</td><td>sunt</td><td>in</td><td>culpa</td><td>qui</td><td>officia</td><td>deserunt</td><td>mollit</td><td>anim</td><td>id</td><td>est</td><td>laborum</td><td>Lorem</td><td>ipsum</td><td>dolor</td><td>sit</td><td>amet,</td><td>consectetur</td></tr>
<tr><td>Row 47</td><td>adipiscing</td><td>elit,</td><td>sed</td><td>do</td><td>eiusmod</td><td>tempor</td><td>incididunt</td><td>ut</td><td>labore</td><td>et</td><td>dolore</td><td>magna</td><td>aliqua.</td><td>Ut</td><td>enim</td><td>ad</td><td>minim</td><td>veniam,</td><td>quis</td><td>nostrud</td><td>exercitation</td><td>ullamco</td><td>laboris</td><td>nisi</td><td>ut</td><td>aliquip</td><td>ex</td><td>ea</td><td>commodo</td><td>consequat.</td></tr>
<tr><td>Row 48</td><td>Duis</td><td>aute</td><td>irure</td><td>dolor</td><td>in</td><td>reprehenderit</td><td>in</td><td>voluptate</td><td>velit</td><td>esse</td><td>cillum</td><td>dolore</td><td>eu</td><td>fugiat</td><td>nulla</td><td>pariatur.</td><td>Excepteur</td><td>sint</td><td>occaecat</td><td>cupidatat</td><td>non</td><td>proident,</td><td>sunt</td><td>in</td><td>culpa</td><td>qui</td><td>officia</td><td>deserunt</td><td>mollit</td><td>anim</td></tr>
</table>
</div>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>
<p>Some text after</p>


你能让只有一个表格可以水平滚动吗?我的意思是,之前的一些文本不需要在右侧留出空间。假设之前的一些文本是AppBar,你会感觉到表格破坏了布局。 - Watanabe.N
是的。只需不使用上面的前两个CSS规则,而是使用最后两个规则即可。 - petern0691
请参见我在此处的答案(https://dev59.com/6MXsa4cB1Zd3GeqPg3l-#74490075),我认为它比这个答案更好。 - petern0691
需要将 overlflow-x: auto; 替换为 overflow-x: auto; - Moshe Fortgang

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接