Table with two sticky headers

1
votes

I am trying to create a table with two sticky headers and one left sticky column, its working fine when we scroll to horizontal, while scrolling vertically and horizontally, second header (the second row is overlapping to left column) is not working properly, can anyone help me? I am attaching screen shot and this is working link.

JSFiddle Link is : https://jsfiddle.net/rqpra89s/

Screen shot
2
jquerysticky
You don't need to copy and paste the whole minified jQuery in your jsfiddle. You can import it in the section "Frameworks and extensions" into the javascript configurations. - Eduardo Páez Rubio
I had another problem, that you "solved" when I saw your table HTML structure. I had questions similar to yours and realised that you can have two table header rows. - danKV

2 Answers

0
votes

Take a look at this version I made for you. I am using just css for the important stuff and it works very well. I have added a class using js on container scroll too.

I hope that helps.

https://jsfiddle.net/bcwhqueu/3/

.table__side {
  left: 0; top: 0;
  position: absolute;
  transition: box-shadow 0.25s ease;
  width: 8.0625rem;
  z-index: 1;
}
0
votes

This is an example for Column and Rows sticky headers using only CSS. You can check more info here.

/* set some spacing (optional)*/

td,
th {
  padding: 20px;
}


/* style columns table headings*/

th[scope=col] {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: teal;
}


/* style columns headings first element*/

th[scope=col]:nth-of-type(1) {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 2;
  background-color: peru;
}


/* style rows table headings*/

th[scope=row] {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: chocolate;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sales</title>
</head>

<body>
  <h1>ACME Company</h1>
  <table>
    <tr>
      <th scope="col">Sales by Country</th>
      <th scope="col">January</th>
      <th scope="col">February</th>
      <th scope="col">March</th>
      <th scope="col">April</th>
      <th scope="col">May</th>
      <th scope="col">June</th>
      <th scope="col">July</th>
      <th scope="col">August</th>
      <th scope="col">September</th>
      <th scope="col">October</th>
      <th scope="col">November</th>
      <th scope="col">December</th>
    </tr>
    <tr>
      <th scope="row">Portugal</th>
      <td>50.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
    </tr>
    <tr>
      <th scope="row">Spain</th>
      <td>50.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
    </tr>
    <tr>
      <th scope="row">France</th>
      <td>50.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
    </tr>
    <tr>
      <th scope="row">Germany</th>
      <td>50.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
    </tr>
    <tr>
      <th scope="row">Italy</th>
      <td>50.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
    </tr>
    <tr>
      <th scope="row">Poland</th>
      <td>50.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
    </tr>
    <tr>
      <th scope="row">Austria</th>
      <td>50.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
    </tr>
    <tr>
      <th scope="row">United States</th>
      <td>50.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
    </tr>
    <tr>
      <th scope="row">England</th>
      <td>50.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
    </tr>
    <tr>
      <th scope="row">Scotland</th>
      <td>50.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
    </tr>
    <tr>
      <th scope="row">Wales</th>
      <td>50.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
    </tr>
  </table>

</body>

</html>