是否有可能將<thead>和<tbody>轉換爲帶有邊框的不透明度？

Question

我需要能夠將表​​格<tbody>和<thead>轉換爲不同的不透明度（作爲UX要求的一部分）。這聽起來不會有問題，除非我的表格行包含底部邊框。

看來，更改<td>和<th>單元格的不透明度對其邊框沒有影響。我嘗試通過使用Alpha透明邊框顏色更改邊框來解決此問題。不幸的是，邊界alpha透明度方法在與不透明度一起轉換時不起作用。

是否有另一種方法來解決這個純粹的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，而是設置border-spacing到0，然後與相鄰的單元格邊框亂動，就可以實現直接在thead和tbody設置opacity你想要的效果。有點尷尬，但它的作品。