嵌套滚动窗口中的粘性 HTML 元素无法正确呈现

Question

在以下情况中...

JSFiddle

...如果稍微滚动一下外部表格，您会看到内部滚动容器中的粘性表格标题实际上呈现在外部滚动容器标题的顶部。

这两组标头不应该存在于单独的堆栈上下文中吗？

除了硬编码 z-index 值之外，是否有任何解决方法？这只是动态生成的模型，因此我必须放置大量管道以动态计算相对于所有其他级别在每个级别使用的正确 z-index 值。

这里没有使用JavaScript 框架，只使用TypeScript和 require。

HTML代码：

<div class="scroll-container">

  <table class="outer-table">

    <thead>

      <tr>

        <th>Outer Column 1</th>

        <th>Outer Column 2</th>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td>Outer Value 1</td>

        <td>Outer Value 2</td>

      </tr>

      <tr>

        <td colspan="2">

          <div class="scroll-container">

            <table class="inner-table">

              <thead>

                <tr>

                  <th>Inner Column 1</th>

                  <th>Inner Column 2</th>

                  <th>Inner Column 3</th>

                </tr>

              </thead>

              <tbody>

                <tr>

                  <td>Inner Value 1</td>

                  <td>Inner Value 2</td>

                  <td>Inner Value 3</td>

                </tr>

                <tr>

                  <td>Inner Value 1</td>

                  <td>Inner Value 2</td>

                  <td>Inner Value 3</td>

                </tr>

                <tr>

                  <td>Inner Value 1</td>

                  <td>Inner Value 2</td>

                  <td>Inner Value 3</td>

                </tr>

                <tr>

                  <td>Inner Value 1</td>

                  <td>Inner Value 2</td>

                  <td>Inner Value 3</td>

                </tr>

                <tr>

                  <td>Inner Value 1</td>

                  <td>Inner Value 2</td>

                  <td>Inner Value 3</td>

                </tr>

Answer 1

您只有一个类为两个表工作，因此没有区分哪个出现在另一个表的顶部或下方。您可能别无选择，只能使用两个单独的类并为每个类添加一个 z-index。例如 - 对每个表使用相同的整个类定义：table.outer-table thead tr th {&nbsp; position:sticky;&nbsp; top:0px;&nbsp; height:2em;&nbsp; z-index:99;}table.inner-table thead tr th {&nbsp; position:sticky;&nbsp; top:0px;&nbsp; height:2em;&nbsp; z-index:98;}我在你的 JSFiddle 页面上测试了这个，它似乎做了你想要的，所以看起来 z-index 在这里很重要。如果表的嵌套可以很广泛，一个类可以使用类似的东西来定位它们：table {z-index:99}table > table {z-index:98}table > table > table {z-index:97}即 - 一个表，表中表和表中表中的表。