Table with fixed header and rotated column titles-CodePudding

I have a table with a fixed header and fixed first column. I also want to rotate the titles of the columns 45 degrees.

Having the header fixed requires setting a background color on the th. However, this causes a problem with the 45-degrees-rotated titles, because the background of the next column overlaps the text of the previous one. Here is an example of the problem:

.fixed_table {
  white-space: nowrap;
  margin: 0;
  border: none;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
.fixed_table td,
.fixed_table th {
  padding: 5px;
}
.fixed_table thead th {
  padding: 5px;
  position: sticky;
  top: 0;
  z-index: 1;
  width: 25vw;
  background: #F8F9FA;
}
.fixed_table td {
  background: #F8F9FA;
  padding: 5px;
  text-align: center;
  border: 1px solid #ccc;
}

.fixed_table tbody th {
  text-align: left;
  position: relative;
}
.fixed_table thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
}
.fixed_table tbody th {
  position: sticky;
  left: 0;
  background: #F8F9FA;
  z-index: 1;
}

th.rotate {
  /* Something you can count on */
  height: 140px;
  white-space: nowrap;
}

th.rotate > div {
  transform: 
    /* Magic Numbers */
    translate(25px, 51px)
    /* 45 is really 360 - 45 */
    rotate(315deg);
  width: 30px;
}
th.rotate > div > span {
  border-bottom: 1px solid #ccc;
  padding: 5px 10px;
}

<div style="height: 100%; width: 100%; overflow-y: scroll; background-color: #F8F9FA; height: 400px;">
  <table >
    <thead>
      <tr>
        <th></th>
        <th ><div><span>Activity 1</span></div></th>
        <th ><div><span>Activity 2</span></div></span></div></th>
        <th ><div><span>Activity 3</span></div></th>
        <th ><div><span>Activity 4</span></div></th>
        <th ><div><span>Activity 5</span></div></th>
        <th ><div><span>Activity 6</span></div></th>
        <th ><div><span>Activity 7</span></div></th>
        <th ><div><span>Activity 8</span></div></th>
        <th ><div><span>Activity 9</span></div></th>
        <th ><div><span>Activity 10</span></div></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Employee 1</th>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      <tr/>
      <tr>
        <th>Employee 2</th>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      <tr/>
      <tr>
        <th>Employee 3</th>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      <tr/>
      <tr>
        <th>Employee 4</th>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      <tr/>
      <tr>
        <th>Employee 5</th>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      <tr/>
      <tr>
        <th>Employee 6</th>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      <tr/>
      <tr>
        <th>Employee 7</th>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      <tr/>
      <tr>
        <th>Employee 8</th>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      <tr/>
      <tr>
        <th>Employee 9</th>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      <tr/>
      <tr>
        <th>Employee 10</th>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      <tr/>
      <tr>
        <th>Employee 11</th>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      <tr/>
      <tr>
        <th>Employee 12</th>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      <tr/>
      <tr>
        <th>Employee 13</th>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      <tr/>
      <tr>
        <th>Employee 14</th>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      <tr/>
      <tr>
        <th>Employee 15</th>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      <tr/>
    </tbody>
  </table>
</div>

And if I don't set the background colors, the rows scroll through the column titles:

.fixed_table {
  white-space: nowrap;
  margin: 0;
  border: none;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
.fixed_table td,
.fixed_table th {
  padding: 5px;
}
.fixed_table thead th {
  padding: 5px;
  position: sticky;
  top: 0;
  z-index: 1;
  width: 25vw;
  background: transparent;
}
.fixed_table td {
  background: #F8F9FA;
  padding: 5px;
  text-align: center;
  border: 1px solid #ccc;
}

.fixed_table tbody th {
  text-align: left;
  position: relative;
}
.fixed_table thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
}
.fixed_table tbody th {
  position: sticky;
  left: 0;
  background: #F8F9FA;
  z-index: 1;
}

th.rotate {
  /* Something you can count on */
  height: 140px;
  white-space: nowrap;
}

th.rotate > div {
  transform: 
    /* Magic Numbers */
    translate(25px, 51px)
    /* 45 is really 360 - 45 */
    rotate(315deg);
  width: 30px;
}
th.rotate > div > span {
  border-bottom: 1px solid #ccc;
  padding: 5px 10px;
}

<div style="height: 100%; width: 100%; overflow-y: scroll; background-color: #F8F9FA; height: 400px;">
  <table >
    <thead>
      <tr>
        <th></th>
        <th ><div><span>Activity 1</span></div></th>
        <th ><div><span>Activity 2</span></div></span></div></th>
        <th ><div><span>Activity 3</span></div></th>
        <th ><div><span>Activity 4</span></div></th>
        <th ><div><span>Activity 5</span></div></th>
        <th ><div><span>Activity 6</span></div></th>
        <th ><div><span>Activity 7</span></div></th>
        <th ><div><span>Activity 8</span></div></th>
        <th ><div><span>Activity 9</span></div></th>
        <th ><div><span>Activity 10</span></div></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Employee 1</th>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      <tr/>
      <tr>
        <th>Employee 2</th>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      <tr/>
      <tr>
        <th>Employee 3</th>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      <tr/>
      <tr>
        <th>Employee 4</th>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      <tr/>
      <tr>
        <th>Employee 5</th>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      <tr/>
      <tr>
        <th>Employee 6</th>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      <tr/>
      <tr>
        <th>Employee 7</th>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      <tr/>
      <tr>
        <th>Employee 8</th>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      <tr/>
      <tr>
        <th>Employee 9</th>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      <tr/>
      <tr>
        <th>Employee 10</th>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      <tr/>
      <tr>
        <th>Employee 11</th>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      <tr/>
      <tr>
        <th>Employee 12</th>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      <tr/>
      <tr>
        <th>Employee 13</th>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      <tr/>
      <tr>
        <th>Employee 14</th>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      <tr/>
      <tr>
        <th>Employee 15</th>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      <tr/>
    </tbody>
  </table>
</div>

Does anyone have a solution to (a) keep the header fixed and not show row data that scrolls up behind it, and (b) to have all 45-degree rotated titles still show correctly?

Thanks in advance!

CodePudding user response：

Try the following code:

.fixed_table thead th {
    padding: 5px;
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: white;
    width: 25vw;
    /* background: transparent; */
}

I hope this helps.

CodePudding user response：

Overlapping Cause: The table header is on the same z-index level as the content, which causes the overlap.

Overlap Solution: Use z-index to tell the browser which element should be on top.

Employee title visible at all times:

SET THIS AT THE BOTTOM CSS:

.rotate{
  z-index:2;
}
.fixed_table tbody th {
  z-index:3;
}
.fixed_table tbody td {
  z-index:2;
}

CodePudding user response：

.fixed_table {
  white-space: nowrap;
  margin: 0;
  border: none;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
.fixed_table td,
.fixed_table th {
  padding: 5px;
}
.fixed_table thead th {
  padding: 5px;
  position: sticky;
  top: 0;
  z-index: 1;
  width: 25vw;
  background: white;
}
.fixed_table td {
  background: #F8F9FA;
  padding: 5px;
  text-align: center;
  border: 1px solid #ccc;
}

.fixed_table tbody th {
  text-align: left;
  position: relative;
}
.fixed_table thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
}
.fixed_table tbody th {
  position: sticky;
  left: 0;
  background: #F8F9FA;
  z-index: 1;
}

th.rotate {
  /* Something you can count on */
  height: 140px;
  white-space: nowrap;
}

th.rotate > div {
  transform: 
    /* Magic Numbers */
    translate(25px, 51px)
    /* 45 is really 360 - 45 */
    rotate(315deg);
  width: 30px;
}
th.rotate > div > span {
  border-bottom: 1px solid #ccc;
  padding: 5px 10px;
}

<div style="height: 100%; width: 100%; overflow-y: scroll; background-color: #F8F9FA; height: 400px;">
  <table >
    <thead>
      <tr>
        <th></th>
        <th ><div><span>Activity 1</span></div></th>
        <th ><div><span>Activity 2</span></div></span></div></th>
        <th ><div><span>Activity 3</span></div></th>
        <th ><div><span>Activity 4</span></div></th>
        <th ><div><span>Activity 5</span></div></th>
        <th ><div><span>Activity 6</span></div></th>
        <th ><div><span>Activity 7</span></div></th>
        <th ><div><span>Activity 8</span></div></th>
        <th ><div><span>Activity 9</span></div></th>
        <th ><div><span>Activity 10</span></div></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Employee 1</th>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      <tr/>
      <tr>
        <th>Employee 2</th>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      <tr/>
      <tr>
        <th>Employee 3</th>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      <tr/>
      <tr>
        <th>Employee 4</th>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      <tr/>
      <tr>
        <th>Employee 5</th>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      <tr/>
      <tr>
        <th>Employee 6</th>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      <tr/>
      <tr>
        <th>Employee 7</th>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      <tr/>
      <tr>
        <th>Employee 8</th>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      <tr/>
      <tr>
        <th>Employee 9</th>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      <tr/>
      <tr>
        <th>Employee 10</th>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      <tr/>
      <tr>
        <th>Employee 11</th>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      <tr/>
      <tr>
        <th>Employee 12</th>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      <tr/>
      <tr>
        <th>Employee 13</th>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      <tr/>
      <tr>
        <th>Employee 14</th>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      <tr/>
      <tr>
        <th>Employee 15</th>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      <tr/>
    </tbody>
  </table>
</div>