CSS sticky table headers in Miva

[VisHorizons]

I have a table that requires a bit of scrolling to see the whole thing. I want the table header to remain on the screen as I scroll.

I made this test in a plain HTML document - click here

<style>
    .bbbbb th {
        position: sticky;
        top:0;
        height: 30px;
        background: red;
    }

</style>

<table class="bbbbb">
    <thead>
    <tr>
      <th>october</th>
      <th>november</th>
      <th>december</th>
      <th>january</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>etc.</td>
      <td>etc.</td>
      <td>etc.</td>
      <td>etc.</td>
    </tr>
  </tbody>
</table>

But when I copy/paste that code into a category header in my Miva admin, the table header doesn't stick. Click here to see that.

Any ideas on what the conflict is here? Thanks for any help.

[dreamingdigital]

Wow, position: sticky in CSS. That's new to me. LOL But I doubt it works properly with tables. Why don't you get it working here and then port that over to Miva and fight with whatever the ReadyTheme does to override you at that point.
https://www.w3schools.com/howto/tryi...sticky_element

[Bruce - PhosphorMedia]

There are two basic issues with position:sticky. The first is, its Parent container MUST be position:relative, and second, it needs a specific height (and of course, content beneath it to trigger the scrolling. Here is a pretty good illustration of the issue:

https://medium.com/@elad/css-positio...s-54cd01dc2d46

[Bruce - PhosphorMedia]

But I doubt it works properly with tables.

Actually, its primary reason for existence is for table headings. :). As I mentioned in the other response, if there are issues with using it, they tend to be from parent container issues. :)

[Bruce - PhosphorMedia]

I have a table that requires a bit of scrolling to see the whole thing. I want the table header to remain on the screen as I scroll.

I made this test in a plain HTML document - click here

<style>
.bbbbb th {
position: sticky;
top:0;
height: 30px;
background: red;
}

</style>

<table class="bbbbb">
<thead>
<tr>
<th>october</th>
<th>november</th>
<th>december</th>
<th>january</th>
</tr>
</thead>
<tbody>
<tr>
<td>etc.</td>
<td>etc.</td>
<td>etc.</td>
<td>etc.</td>
</tr>
</tbody>
</table>

But when I copy/paste that code into a category header in my Miva admin, the table header doesn't stick. Click here to see that.

Any ideas on what the conflict is here? Thanks for any help.

Oh, and I think you'll want to target the sticky to thead tr, not the th cells. e.g., .bbbbb thead tr {}

[VisHorizons]

Thanks for all the info. I'll definitely try out all your suggestions. I got the idea from here: https://css-tricks.com/position-stic...table-headers/

I can get the whole thing to work as a stand-alone HTML document, but when I copy/paste the code into Miva, the feature doesn't work.

[Bruce - PhosphorMedia]

FYI: I mispoke about assigning it to th. Apparently, thead/tr cannot take a height statement, so it wont work there. (Sorry, don't use tables that much).

Another option is use grid divs instead of a table.