CODEWITHSUNDEEP
htmlcss
xRay
xRay

Reputation: 801

Position sticky works on <table> but not on <tr>

I have a table and I want the 3rd row to stay on the top when I scroll down.

body {
  height: 200vh;
}

.sticky {
  position: sticky;
  top: 0;
}
<table>
  <tr>
    <td>#</td>
    <td>1</td>
  </tr>
  <tr>
    <td>#</td>
    <td>2</td>
  </tr>
  <tr class="sticky">
    <td>#</td>
    <td>3</td>
  </tr>
</table>

I can use the class sticky on the element <table> and that works fine but not on <tr>.

Upvotes: 0

Views: 556

Answers (1)

Mathix420
Mathix420

Reputation: 1287

You can’t position: sticky; a <thead> nor a <tr>, but you can sticky a <th>.

Source: https://css-tricks.com/position-sticky-and-table-headers/

Upvotes: 5

Related Questions