javascript - 停止一个div的背景色覆盖另一个旋转后重叠的div的内容

编辑：jsFiddle与确切的问题。here
我希望标题中的旋转文本不会被切断，因为它显示here.
所以我有一个表格，标题像下面这样旋转。

现在我试着把表的标题粘起来，这样当我滚动的时候，标题就不会动。我使用了thisjquery插件来实现这一点。
问题是，为了在滚动时正确显示表格，页眉需要有一个白色的背景色，否则会像这样。

但是，如果我将<th>的背景颜色设置为白色，则此颜色将重叠其他标题的文本。下面我把第四行的背景色设为白色。

有什么方法可以使th的背景色不与其他th的文本重叠吗？我试过将文本的z索引设置得很高，但没有效果。
HTML格式：

<table>
   <thead>
      <tr>
        <th></th>
        <th>Fault Finding and Testing</th>
        <th>Replacing Faulty lightbulbs</th>
        <th>Switching MCSBS MCCBs</th>
      </tr>
   </thead>
   <tbody>
      <tr>
        <td><div>Bob Bobbers</div></td>
        <td><div></div></td>
        <td><div></div></td>
        <td><div></div></td>
      </tr>
   </tbody>
 </table>

CSS:

th.rotate {
height: 110px;
white-space: nowrap;

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

Javascript代码：

$(".taskApproverTable").tableHeadFixer({'left' : 1, 'head': true});

最佳答案

在每个th上设置不同的z-index，以便最左边的z-index最高：

/**
* setRotatedTableHeadersToNotHideEachOther sets z-index on given
* table th's so all th text will be visible when rotated.
* The left most th will have the highest z-index and the last th will have z-index 0;
* @param tableSelector is a jQuery selector for the table that will have its th z-index changed
* @example
*           fix all tables that has class taskApproverTable
*           setRotatedTableHeadersToNotHideEachOther(".taskApproverTable");
*/
function setRotatedTableHeadersToNotHideEachOther(tableSelector){
  var tables = $(tableSelector);
  for(var i=0,nrTables = tables.length;i<nrTables;i++){
  var table = tables[i];
      var ths = $('th',table);
      for(var j=0, nrThs = ths.length;j<nrThs;j++){
          // get th from right to left
          var th = ths[nrThs - j - 1];
          // set lowest z-index on the one to the right
          $(th).css('z-index', j);
    }
  }
}

setRotatedTableHeadersToNotHideEachOther(".taskApproverTable");

updated jsfiddle