HTML Table 行上的选取框动画

Question

当marquee Animation运行时，我将如何使行不超过table headers？

我在下面的 jsfiddle 上也有代码供任何想看的人使用：

.marquee {
    top: 1em;
    position: relative;
    box-sizing: border-box;  
    animation: marquee 10s linear 0s infinite;
}
.marquee:hover {
    animation-play-state: paused;
}
@keyframes marquee {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(0, -100%);
    }
}

<table id="myTable" width="100%">
  <thead>
    <tr>
      <th scope="col">Header 1</th>
      <th scope="col">Header 2</th>
      <th scope="col">Header 3</th>
      <th scope="col">Header 4</th>
      <th scope="col">Header 5</th>
    </tr>
  </thead>
  <tbody class="marquee">
    <tr>
      <td>Row1 - Column 1</td>
      <td>Row1 - Column 2</td>
      <td>Row1 - Column 3</td>
      <td>Row1 - Column 4</td>
      <td>Row1 - Column 5</td>
    </tr>
    <tr>
      <td>Row2 - Column 1</td>
      <td>Row2 - Column 2</td>
      <td>Row2 - Column 3</td>
      <td>Row2 - Column 4</td>
      <td>Row2 - Column 5</td>
    </tr>
    <tr>
      <td>Row3 - Column 1</td>
      <td>Row3 - Column 2</td>
      <td>Row3 - Column 3</td>
      <td>Row3 - Column 4</td>
      <td>Row3 - Column 5</td>
    </tr>
    <tr>
      <td>Row4 - Column 1</td>
      <td>Row4 - Column 2</td>
      <td>Row4 - Column 3</td>
      <td>Row4 - Column 4</td>
      <td>Row4 - Column 5</td>
    </tr>
    <tr>
      <td>Row5 - Column 1</td>
      <td>Row5 - Column 2</td>
      <td>Row5 - Column 3</td>
      <td>Row5 - Column 4</td>
      <td>Row5 - Column 5</td>
    </tr>
    <tr>
      <td>Row6 - Column 1</td>
      <td>Row6 - Column 2</td>
      <td>Row6 - Column 3</td>
      <td>Row6 - Column 4</td>
      <td>Row6 - Column 5</td>
    </tr>
  </tbody>
</table>

如有任何帮助，将不胜感激？

我在 CSS 方面尝试了几个变体都无济于事

Answer 1

只需将 z-index: -1; 添加到 .marquee 并将背景颜色添加到 th 元素。

th {
  background-color: blue;
}

.marquee {
    top: 1em;
    position: relative;
    z-index: -1;
    box-sizing: border-box;  
    animation: marquee 10s linear 0s infinite;
}

或者你也可以将th元素设置得更高，那么这个css就足够了。

th {
  position: relative;
  z-index: 2;
  background-color: blue;
}

这是有效的 https://jsfiddle.net/L8r6vfhx/

Answer 2

您可以尝试将“z-index”属性添加到您的动画中

HTML Table 行上的选取框动画

HTML Table Marquee animation on rows

html

css

css-animations

marquee