Why is part of the text being cut off by the background of the sticky header?-CodePudding

I'm currently trying to create a sticky rotated header for the html table. Currently part of the text is being cut off by the background of the sticky header, and I've tried playing around with the css and change the z-index of other elements, but nothing seems to be helping. I'm not sure if I'm implementing this in an incorrect fashion, or if there was a better way to do. Here's my html code -

.rotated-header{
  width:30px;
  height:80px;
  position:relative;
  transform:
      translate(30px, 50px)
      rotate(315deg);
  white-space:nowrap;
}

.header {
  vertical-align: bottom;
}

.tableFixHead {
  overflow: auto;
  height: 150px;
}

.tableFixHead thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background:white;
}

<div >
  <table>
  <thead>
    <tr>
      <th >Asset</th>
      <th >
        <div >
          <span>Rotated row 1</span>
        </div>
      </th>
      <th >
        <div >
          <span>Rotated row 2</span>
        </div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>some</td>
      <td>some</td>
      <td>some</td>
    </tr>
    <tr>
      <td>some</td>
      <td>some</td>
      <td>some</td>
    </tr>
    <tr>
      <td>some</td>
      <td>some</td>
      <td>some</td>
    </tr>
        <tr>
      <td>some</td>
      <td>some</td>
      <td>some</td>
    </tr>
    <tr>
      <td>some</td>
      <td>some</td>
      <td>some</td>
    </tr>
    <tr>
      <td>some</td>
      <td>some</td>
      <td>some</td>
    </tr>
  </tbody>
  </table>
</div>

CodePudding user response：

One solution is to remove width and add top. or simply just make .tableFixHead thead th background transparent like so

.rotated-header{
  height:80px;
  width: 30px;
  position:relative;
  transform:
      translate(30px, 50px)
      rotate(315deg);
  white-space:nowrap;
}

.header {
  vertical-align: bottom;
}

.tableFixHead {
  overflow: auto;
  height: 150px;
}

.tableFixHead thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background:transparent;
}

<div >
  <table>
  <thead>
    <tr>
      <th >Asset</th>
      <th >
        <div >
          <span >Rotated row 1</span>
        </div>
      </th>
      <th >
        <div >
          <span >Rotated row 2</span>
        </div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>some</td>
      <td>some</td>
      <td>some</td>
    </tr>
    <tr>
      <td>some</td>
      <td>some</td>
      <td>some</td>
    </tr>
    <tr>
      <td>some</td>
      <td>some</td>
      <td>some</td>
    </tr>
        <tr>
      <td>some</td>
      <td>some</td>
      <td>some</td>
    </tr>
    <tr>
      <td>some</td>
      <td>some</td>
      <td>some</td>
    </tr>
    <tr>
      <td>some</td>
      <td>some</td>
      <td>some</td>
    </tr>
  </tbody>
  </table>
</div>

CodePudding user response：

You can make just the table row sticky instead of making each of the heading cells sticky as Konrad Linkowski said in a comment.

.tableFixHead thead tr {
    position: sticky;
}

.rotated-header {
  width: 30px;
  height: 80px;
  position: relative;
  transform: translate(30px, 50px) rotate(315deg);
  white-space: nowrap;
}

.header {
  vertical-align: bottom;
}

.tableFixHead {
  overflow: auto;
  height: 150px;
}

.tableFixHead thead tr {
  position: sticky;
  top: 0;
  z-index: 1;
  background: white;
}

<div >
  <table>
    <thead>
      <tr>
        <th >Asset</th>
        <th >
          <div >
            <span>Rotated row 1</span>
          </div>
        </th>
        <th >
          <div >
            <span>Rotated row 2</span>
          </div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>some</td>
        <td>some</td>
        <td>some</td>
      </tr>
      <tr>
        <td>some</td>
        <td>some</td>
        <td>some</td>
      </tr>
      <tr>
        <td>some</td>
        <td>some</td>
        <td>some</td>
      </tr>
      <tr>
        <td>some</td>
        <td>some</td>
        <td>some</td>
      </tr>
      <tr>
        <td>some</td>
        <td>some</td>
        <td>some</td>
      </tr>
      <tr>
        <td>some</td>
        <td>some</td>
        <td>some</td>
      </tr>
    </tbody>
  </table>
</div>