将tr堆叠在一张桌子中

Question

我正在尝试使用z-index将tr堆叠在一个表中，但是没有运气。我无法更改/添加到结构本身，因此除非绑定了普通的javascript或CSS，否则我的双手会被束缚住。在我的情况下，我需要第三个tr排在前2个tr的后面。

table {
  position: relative;
  z-index: 100;
}

table tr:nth-child(3) {
  position: relative;
  z-index: 1;
}

table tr:nth-child(1),
table tr:nth-child(2) {
  position: fixed;
  z-index: 100;
}

<table>
  <tr>
    <td>
      // Content
    </td>
  </tr>
  <tr>
    <td>
      // Content
    </td>
  </tr>
  <tr>
    <td>
      // Content needs to flow behind the other two on scrolling
    </td>
  </tr>
</table>

Answer 1

除非我理解错误的问题，否则我认为这是您想要实现的目标？

https://codepen.io/littlefinger42/pen/vvXbPZ

我还没有更改您的任何CSS，但是我已经更正了您的HTML。 <tr>元素需要<td>或<tr>作为子元素。

Answer 2

尝试将您的内容放入td：

<style type="text/css">
    table {
        position: relative;
        z-index: 100;
    }

        table tr:nth-child(3) {
            position: relative;
            z-index: 1;
        }

        table tr:nth-child(1), table tr:nth-child(2) {
            position: fixed;
            z-index: 100;
        }
</style>

 <table>
        <tr>
            <td>
                // Content
            </td>
           
        </tr>
        <tr><td>
    // Content
</td>
           
        </tr>
        <tr> <td>
    // Content needs to flow behind the other two on scrolling
</td>
           
        </tr>
    </table>

Answer 3

表的样式有点棘手，因为它们不是大多数html一样的典型display: block元素。相反，它们默认为display: table, table-row, table-cell。

为了使z-index分层起作用，您需要给<tr>加上display: block，并确保包括<td>在<tr>中，以便保持事物的语义。这样您就可以实现您想要做的事情。

table{ }
table tr { position: relative; display: block; z-index: 1; }

table tr:nth-child(1) 	{ background: yellow; }
table tr:nth-child(2)	{ background: skyblue; }
table tr:nth-child(3)	{ background: lime; z-index: -1; transform: translateY(-50%); }

<table>
    <tr>
        <td>td// Content</td>
    </tr>
    <tr>
        <td>td// Content</td>
    </tr>
    <tr>
        <td>// Content needs to flow behind the other two on scrolling</td>
    </tr>
</table>