<thead>と<tbody>を境界線の異なる不透明度に移行することはできますか？

Question

テーブルの<tbody>と<thead>を異なる不透明度（UX要件の一部として）に移行できる必要があります。これは、私のテーブルの行に下の境界線が含まれていることを除いて、それ自体で問題があるとは限りません。

<td>と<th>というセルの不透明度を変更しても、境界線には影響しないようです。私はアルファの透明な境界線の色で境界線を変更することでこの課題を回避しようとしました。残念ながら、境界アルファ透明度アプローチは、不透明度と共に遷移している間は機能しません。

純粋なCSS/HTMLでこれを回避する別の方法はありますか？

アン例：

$('button').on('click', function() { 
 
\t $('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を使用して、代わりに0にborder-spacingを設定し、隣接するセルの枠線をいじるない場合は、その後、theadとtbodyに直接opacityを設定することで、必要な効果を達成することができます。厄介なのですが、うまくいきます。