Sticky td values

The values in column 1 spans across multiple rows. and without this, the Col1 values are center aligned and makes it difficult to know what is the value. With this the value in col1 are always visible for the corresponding values in col2.

by ankitkraken

HTML

<table class="dep-jobs-table" id="dep-jobs-table">
    <thead id="idHeader">
      <tr>
        <th>Col 1</th>
        <th>Col 2</th>
      </tr>
    </thead>
    <tbody id="tableBody">
      <tr>
        <td class="td-class-name" rowspan="10">
          <div class="level-1">
            "Hats"
          </div>
        </td>
        <td>
          "Hat 1"
        </td>
      </tr>
      <tr>
        <td>
          "Hat 2"
        </td>
        </tr>
        <tr>
        <td>
          "Hat 3"
        </td>
        </tr>
        <tr>
        <td>
          "Hat 4"
        </td>
        </tr>
        <tr>
        <td>
          "Hat 5"
        </td>
        </tr>
        <tr>
        <td>
          "Hat 6"
        </td>
        </tr>
        <tr>
        <td>
          "Hat 7"
        </td>
        </tr>
        <tr>
        <td>
          "Hat 8"
        </td>
        </tr>
        <tr>
        <td>
          "Hat 9"
        </td>
        </tr>
        <tr>
        <td>
          "Hat 10"
        </td>
        </tr>
        
        <tr>
   <td class="td-class-name" rowspan="10">
     <div class="level-1">
       "Cars"
     </div>
   </td>
   <td>
     "Car 1"
   </td>
 </tr>
 <tr>
   <td>
     "Car 2"
   </td>
   </tr>
   <tr>
   <td>
     "Car 3"
   </td>
   </tr>
   <tr>
   <td>
     "Car 4"
   </td>
   </tr>
   <tr>
   <td>
     "Car 5"
   </td>
   </tr>
   <tr>
   <td>
     "Car 6"
   </td>
   </tr>
   <tr>
   <td>
     "Car 7"
   </td>
   </tr>
   <tr>
   <td>
     "Car 8"
   </td>
   </tr>
   <tr>
   <td>
     "Car 9"
   </td>
   </tr>
   <tr>
   <td>
     "Car 10"
   </td>
   </tr>
 
 
 <tr>
        <td class="td-class-name" rowspan="10">
          <div class="level-1">
            "Hats"
          </div>
        </td>
        <td>
          "Hat 1"
        </td>
      </tr>
      <tr>
        <td>
          "Hat 2"
        </td>
        </tr>
        <tr>
        <td>
          "Hat 3"
        </td>
        </tr>
        <tr>
        <td>
          "Hat...

CSS

table, table td, table th {
    border: 1px solid black;
  }
  
  table #idHeader{
    position:sticky;
    top:0;
    z-index:3;
    background-color: teal;
  }
  
  .td-class-name{
    vertical-align: top;
    
  }
  
  .level-1{
    position:sticky;
    top: 30px;
    z-index: 1;
  }