粘性表标题结构

时间：2017-12-21 10:45:30

标签： css z-index opacity

我创作了小提琴供参考： - FIDDLE。 在这个我有表格结构，我想在页面顶部粘贴表格标题，所以我使用translateY()你可以在 FIDDLE 上查看它。 现在在第一列上有一个带有不透明度的复选框：0.3 。

现在，当我滚动表格并且 tbody 的任何复选框与 thead 的复选框重叠时，我无法检查thead复选框。

我还创建了问题视频： - VIDEO。如果不透明度小于1，然后如果您尝试重叠复选框，则不会选中thead复选框。如果我使用不透明度：1 它运行正常。即使我将 z-index 提供给标题复选框，它也无效。 注意： - 我无法删除或更改输入不透明度

2 个答案:

答案 0 :(得分：2)

奇怪的错误。似乎可以通过将<thead>放在html源代码中的<tbody>下来解决。 https://jsfiddle.net/euejc4kg/

所以它与堆叠/订单有关，我想我可以通过设置translate3d或tbody上的任何东西来修复它，但似乎没有解决它。但也许这是其他人可以使用的东西。

另一种选择可能是在复选框的顶部使用标签，而在复选框上根本没有指针事件。

答案 1 :(得分：1)

这是Chrome的一个（hacky）解决方法...

使用inputs顶部的pointer-events: none创建不透明度效果并设置$(this).on('scroll', function() { $('table').find('#table_header').css('transform', 'translateY(' + $(this).scrollTop() + 'px)'); });。

fiddle 

table {
  position: relative;
}

table:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  
  display: block;
  background: #fff;
  opacity: .7;
  width: 20px;
  pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead id='table_header'>
    <tr>
      <th>
        <div>
          <input type="checkbox" name="">
        </div>
      </th>
      <th>a</th>
      <th>b</th>
      <th>c</th>
      <th>d</th>
      <th>e</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>
    <tr>
      <td>
        <div>
          <input type="checkbox" name="">
        </div>
      </td>
      <td>a1</td>
      <td>b1</td>
      <td>c1</td>
      <td>d1</td>
    </tr>

  </tbody>
</table>
perlcmd="perl -i -pe 's/2005-03-31T19:13:30/$(date +"%Y-%m-%dT%H:%M:%S")/' ./file.txt"
echo $perlcmd
$perlcmd

相关问题
最新问题