Search code examples
htmlcsscss-animationsmarquee

HTML Table Marquee animation on rows

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:

https://jsfiddle.net/caddenc/4dxjzb17

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

Any help would be greatly appreciated?

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

Solution

  • 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/