Question

编辑：jsFiddle确切的问题。 here

我希望标题中的旋转文字不会被显示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

在每个上设置不同的z-index，这样最左边的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

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

1 个答案: