隱藏和顯示CSS表格的示例代碼
在CSS中，我們可以使用display屬性來隱藏或顯示表格，以下是一些示例代碼：
<!DOCTYPE html>
<html>
<head>
<style>
.hidden-table {
display: none;
}
.visible-table {
display: table;
}
</style>
</head>
<body>
<table class="hidden-table">
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
<tr>
<td>張三</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
</tr>
</table>
<button onclick="showTable()">顯示表格</button>
<button onclick="hideTable()">隱藏表格</button>
<script>
function showTable() {
document.querySelector('.hidden-table').classList.remove('hidden-table');
document.querySelector('.hidden-table').classList.add('visible-table');
}
function hideTable() {
document.querySelector('.visible-table').classList.remove('visible-table');
document.querySelector('.visible-table').classList.add('hidden-table');
}
</script>
</body>
</html>在上面的示例中，我們定義了兩個CSS類：hidden-table和visible-table。hidden-table類用于隱藏表格，而visible-table類用于顯示表格，我們使用JavaScript來動態(tài)添加或刪除這些類，從而實現(xiàn)表格的隱藏和顯示功能。
版權(quán)聲明：除非特別標(biāo)注，否則均為本站原創(chuàng)文章，轉(zhuǎn)載時請以鏈接形式注明文章出處。
