html - 是否可以将 和 转换为带边框的不同透明度？

Question

我需要能够转换表的 <tbody>和 <thead>不同的不透明度(作为用户体验要求的一部分)。这本身听起来没有问题，除了我的表格的行包含底部边框。

似乎改变了<td>的不透明度|和 <th>细胞对其边界没有影响。我试图通过使用 alpha 透明边框颜色更改边框来解决这个挑战。不幸的是，边界 alpha 透明度方法在与不透明度一起过渡时不起作用。

是否有另一种方法可以使用纯 CSS/HTML 解决此问题？

一个例子:

$('button').on('click', function() {
	$('table').toggleClass('opaque');
});

table {
  border-collapse: collapse;
  text-align: left;
  width: 100%;
}

td, th {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  opacity: 0.1;
  transition: border-color 2s linear, opacity 2s linear;
 }
 
.opaque td,  .opaque th {
  border-color: rgba(0, 0, 0, 1);
  opacity: 1;
} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="opaque">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Matthew</td>
      <td>24</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>John</td>
      <td>49</td>
      <td>Chicago</td>
    </tr>
    <tr>
      <td>James</td>
      <td>12</td>
      <td>Los Angeles</td>
    </tr>
  </tbody>
</table>

<button type="button">Toggle Opacity</button>

Answer 1

这很奇怪。

看起来问题的根本原因是 border-collapse:边框折叠，父元素 thead 和 tbody 不透明不会工作。我假设这是由于 thead 和 tbody 中的相邻单元共享折叠的边框。

如果您不使用 border-collapse 而是将 border-spacing 设置为 0 然后摆弄相邻的单元格边框，您然后可以通过直接在thead和tbody上设置opacity来达到你想要的效果。有点尴尬，但它确实有效。