HTML Table Marquee animation on rows-CodePudding

How would I get the rows to not overlap over the table headers when the marquee animation runs?

I've got the code here below also on jsfiddle for anyone that wants to take a look:

.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 >
    <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>

Any help would be greatly appreciated?

I've tried a couple variations on the CSS side to no avail

CodePudding user response：

Simply add z-index: -1; to .marquee and a background color to the th elements.

th {
  background-color: blue;
}

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

alternatively you can also set the th element to be higher, then this css is enough.

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

Here is it working https://jsfiddle.net/L8r6vfhx/

CodePudding user response：

You can try adding the "z-index" property to you animation