javascript - 停止一个 div 的背景颜色覆盖另一个 div 的内容，旋转并因此重叠，div

Question

编辑:jsFiddle 有确切的问题。 here

我希望标题中的旋转文本不会像显示的那样被 chop here.

所以我有一个表格，其中的标题如下所示旋转。

现在我正在尝试使表格的标题保持不变，以便在我滚动时标题保持在原位。我用过this jquery 插件来执行此操作。

问题是为了在滚动时正确显示表格，标题需要有白色的背景色，否则它看起来像这样。

但是如果我设置 <th> 的背景颜色为白色然后此颜色与其他标题重叠的文本重叠。如下所示，我将第 4 行的背景颜色设置为白色。

有什么办法可以让第一个的背景颜色不与其他那个旋转过的文本重叠吗？我试过将文本的 z-index 设置得很高，但没有效果。

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});

Answer 1

在每个 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