在Web開發中，CSS表格是一個重要的排版方式，可以幫助我們呈現數據和信息。除了傳統的表格布局，還可以使用CSS來實現卡片模式，使頁面更加美觀、實用。今天，我們就來學習如何使用CSS表格點擊切換卡片模式。

/* CSS樣式 */
.table {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
grid-template-rows: auto;
gap: 20px;
margin: 0 auto;
width: 100%;
}
.card {
background-color: #f5f5f5;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
border-radius: 5px;
overflow: hidden;
cursor: pointer;
transition: all 0.3s ease;
}
.card:hover {
transform: translateY(-2%);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.card img {
width: 100%;
height: auto;
}
.card h2 {
margin: 0;
padding: 10px;
font-size: 24px;
font-weight: bold;
color: #333;
}
.card p {
margin: 0;
padding: 10px;
font-size: 16px;
color: #666;
}
.card.active {
transform: scale(1.05);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

以上代碼實現了一個基本的卡片模式，在這里，我們使用了CSS網格（Grid）來布局，自動填充了整個容器，并保留了每個單元格的最小寬度。每個卡片包含一個圖片、一個標題和一段描述，并設置一些簡單的變化效果，當我們鼠標懸浮在卡片上時會有一個輕微的移動和陰影效果。

// JavaScript代碼
const cards = document.querySelectorAll('.card');
cards.forEach((card) => {
card.addEventListener('click', (e) => {
cards.forEach((c) => c.classList.remove('active'));
e.currentTarget.classList.add('active');
});
});

此外，我們使用JavaScript編寫了一些代碼，在每個卡片上添加了一個點擊事件，當我們單擊卡片時會將其他卡片的活動狀態清除，并使當前卡片處于活動狀態，我們為活動卡片添加了更多的變化效果。

以上就是如何使用CSS表格點擊切換卡片模式的教程，相信通過這個簡單的示例，大家會有更多的創意和靈感。