CSS中的疊加（overlay）效果能夠幫助我們更好地展示數據。下面我們就來學習如何通過CSS實現疊加顯示表格的效果。

首先看一下HTML代碼，我們需要將要顯示的表格和蒙版分別放在兩個div里。

<div class="table-wrapper">
<table>
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
</thead>
<tbody>
<tr>
<td>張三</td>
<td>25</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
</tr>
</tbody>
</table>
</div>
<div class="overlay"></div>

CSS代碼分兩部分。第一部分是對表格和表格容器的樣式進行設置：

.table-wrapper {
position: relative;
z-index: 1;
padding: 10px;
}
table {
width: 100%;
background-color: #fff;
border-collapse: collapse;
}

表格容器的position為relative，是為了后面設置蒙版的時候可以用到。同時我們設置了z-index為1，是為了在后面設置蒙版z-index值為2時，能夠覆蓋在表格上。另外我們對表格設置了背景色為白色，同時去除了表格邊框。

第二部分CSS是對蒙版的設置：

.overlay {
position: absolute;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
transition: all 0.5s ease;
z-index: 2;
}
.table-wrapper:hover .overlay {
opacity: 1;
visibility: visible;
}

首先我們設置蒙版的position為absolute，同時設置top、left、width、height都為100%，是為了覆蓋在整個表格上。background-color為rgba(0,0,0,0.5)，設置半透明背景，這是為了保證表格可見性。

接下來我們將opacity和visibility都設置為0，是為了初始時蒙版不可見。我們設置了過渡效果，得以通過hover事件來控制蒙版的可見性。當我們在表格上hover時，通過設置opacity和visibility為1，蒙版就可以覆蓋在表格上了。

通過以上CSS代碼，我們就可以實現疊加顯示表格的效果。當然，我們可以通過修改CSS樣式來實現不同的疊加效果。