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

【问题标题】：Stop background color of one div covering the content of another, rotated and thus overlapping, div停止一个 div 的背景颜色覆盖另一个 div 的内容，旋转并因此重叠，div
【发布时间】：2015-11-19 12:32:14
【问题描述】：

编辑：jsFiddle 解决了确切的问题。 here

我希望标题中的旋转文本不会被截断，因为它显示为here.

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

现在我正在尝试使表格的标题保持不变，以便在滚动时标题保持在原位。我已经使用this jquery 插件来做到这一点。

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

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

有没有什么方法可以使 th 的背景颜色不与旋转到该 th 上的其他 th 中的文本重叠？我尝试将文本的 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});

【问题讨论】：

也许您可以展示您的代码，以便我们有办法重现问题？
添加了mock up代码，实际代码很复杂。
thead > tr{background:white;} 试试这个
@OneTwo 不是修复thead而不是th更好吗？
我在这里设置了一个快速小提琴：jsfiddle.net/ggxmcypd 我确实必须在您的 css 中添加一些内容才能使其正常运行，但我没有看到上述问题。也许你留下的部分是原因。您可以使用所有代码示例更新此小提琴并将其附加到您的问题中，以便我们更轻松地回答。

标签： javascript jquery html css

【解决方案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

【讨论】：