0

I created an HTML table with a single header row and I applied the logic in CSS to freeze it (position: sticky on a th element). It worked fine, but then I decided to split the header into two rows and that's when my scrolling broke down. The second row of the header scrolls over the first row.

Is there a way to fix it with CSS? I've seen some solutions here of freezing rows and columns with jquery but I don't really know jquery so I was wondering if there is a simpler way to do it.

Here is my table:

 <table id="transformTbl">
    <thead>
      <tr class = "first">
        <th>Symbol</th>
        <th colspan="3">Expiration</th>
        <th colspan="5">Prior Days Prices</th>
        <th>Strike Price</th>
        <th colspan="2">Difference</th>
        <th colspan="3">Recovery</th>
      </tr>
      <tr class = "second">
        <th></th>
        <th>Date</th>
        <th>Weekday</th>
        <th>Price</th>
        <th>-1</th>
        <th>-2</th>
        <th>-3</th>
        <th>-4</th>
        <th>-5</th>
        <th></th>
        <th>$</th>
        <th>%</th>
        <th>Date</th>
        <th>Price</th>
        <th>Days</th>
      </tr>
    </thead>

Here is my CSS:

table {
    border: 2px solid rgb(54, 7, 7);
    border-radius: 5px;
    background-color: #f8f8ff;
    width: auto;
    outline: 1px solid rgb(49, 1, 1);
}
th {
    position: sticky;
    top: 0;
    border-bottom: 2px solid #000;
    color: #e4f1e6;
    background-color: #031401;
    padding: 2px 2px;
    opacity: .70;
    font-size:15px;
    border-radius: 5px;
    z-index: 1;
}

Please note that I only included an example of my header rows. My table obviously has tbody that follows thead and all the corresponding tr/td elements that are getting populated with PHP call to MySQL stored procedure.

Scrolled to the top:

enter image description here

Scrolled down:

enter image description here

Thank you

Jake
  • 55
  • 5
  • Does this answer your question? [Sticky header table with mutiple lines in the thead](https://stackoverflow.com/questions/54444642/sticky-header-table-with-mutiple-lines-in-the-thead) – Ravi Chaudhary Mar 30 '21 at 19:26

1 Answers1

1

When having more than one row of header in table tag, due to an existing issue with Chrome, we have to provide a hard-coded position to the second row of header

.first th {
  position: sticky;
  top: 0px;
}

.second th {
  position: sticky;
  top: 45px;
}
Ravi Chaudhary
  • 660
  • 6
  • 22
  • No, this didn't help. Placing it on thead only wouldn't make any header rows sticky . Placing it on "thead th" made it work the same way it did before. – Jake Mar 30 '21 at 18:00
  • I am not sure about the exact requirement but if you want both the headers to be sticky, this could work: https://codesandbox.io/s/dreamy-browser-cw0ko?file=/src/styles.css – Ravi Chaudhary Mar 30 '21 at 18:39
  • One more resource which offers similar solution as mine: https://stackoverflow.com/questions/12266262/position-sticky-on-thead – Ravi Chaudhary Mar 30 '21 at 19:57