代码之家  ›  专栏  ›  技术社区  ›  Vandan Shah

粘性表格标题结构中的不透明度问题

opacity z-index css
  •  3
  • Vandan Shah  · 技术社区  · 7 年前

    我制作了小提琴以供参考:- FIDDLE . 在这里,我有一个表结构,我想把表头贴在页面的顶部,因此我使用了 translateY() 你可以检查一下 小提琴 . 现在,在第一列中有一个复选框 不透明度:0.3 .

    现在,当我滚动表格和 表格主体 与的复选框重叠 thead公司 然后,我无法选中thead复选框。

    我还制作了问题视频:- VIDEO . 如果有 不透明度 小于1,然后如果尝试重叠复选框,则不会选中thead复选框。如果我使用 不透明度:1 它工作得很好。即使我 z指数 到标题的复选框,它不工作。 注:- 我无法删除或更改输入不透明度

    2 回复  |  直到 7 年前
        1
  •  3
  •   René    7 年前

    奇怪的虫子。似乎可以通过放置 <thead> 在下面 <tbody> 在html源代码中。 https://jsfiddle.net/euejc4kg/

    所以这与堆叠/顺序有关,我想我可以通过设置translate3d或tbody上的任何东西来修复它,但这似乎无法修复它。但也许这是其他人可以合作的。

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

        2
  •  1
  •   sol    7 年前

    这里有一个Chrome的(黑客)解决方案。。。

    使用创建不透明度效果 psuedoelement 在 inputs 和设置 pointer-events: none .

    fiddle 

    $(this).on('scroll', function() {
  $('table').find('#table_header').css('transform', 'translateY(' + $(this).scrollTop() + 'px)');
});
    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>
    推荐文章
    camjames  ·  Android Studio中的不透明度级别
    7 年前
    david  ·  标题栏中的滑块小部件
    7 年前
    David C.  ·  同级元素继承不透明度
    7 年前
    lulZghost  ·  css不透明度转换不工作
    7 年前
    paulcook  ·  CSS带渐变遮罩的垂直滚动字幕
    7 年前
    dzierzak  ·  谷歌表格图表-如何设置行的透明度?
    7 年前
    Vandan Shah  ·  粘性表格标题结构中的不透明度问题
    7 年前
    Jakob  ·  禁用(neo)vim中的背景透明度
    7 年前
    user8646839  ·  我可以在Android Google map API中设置多段线不透明度吗
    7 年前
    Arkadis Stepanov  ·  CSS不透明度在li中不起作用
    8 年前
    关于  
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号