CSS控制表格折疊功能，可以大大方便網頁內容的展示和用戶的閱讀體驗。下面我們來看一下如何實現這個功能。

首先，我們需要定義表格的布局和樣式。我們可以使用table和td標簽來定義表格的結構，在td標簽內添加文本和圖片等內容。我們可以使用border、padding等CSS屬性來控制表格的邊框、間距、顏色等樣式，以達到美化表格的目的。

table {
border-collapse: collapse;//合并單元格邊框
width: 100%;
text-align: center;//表格內容居中
}
td {
border: 1px solid #ddd;
padding: 10px;
}

其次，我們需要添加CSS樣式來實現表格的折疊功能。我們可以定義一個類名，例如“hidden”，然后將折疊的內容添加到這個類名下面。

.hidden {
display: none;//隱藏折疊內容
}

接下來，我們使用JavaScript來實現表格的折疊和展開功能。我們可以定義一個函數，例如“showHide”，在點擊事件觸發時判斷當前狀態，如果是隱藏，則展開；如果是展開，則隱藏。

function showHide(id) {
var elem = document.getElementById(id);
if (elem.style.display === "none") {
elem.style.display = "table-row";
} else {
elem.style.display = "none";
}
}

最后，我們需要在HTML中綁定點擊事件，當點擊表頭時觸發showHide函數，根據單元格的id來控制折疊內容的展開和隱藏。

<table>
<thead>
<tr>
<th onclick="showHide('hidden1')">標題1</th>
<th onclick="showHide('hidden2')">標題2</th>
<th onclick="showHide('hidden3')">標題3</th>
</tr>
</thead>
<tbody>
<tr>
<td>內容1</td>
<td>內容2</td>
<td>內容3</td>
</tr>
<tr id="hidden1" class="hidden">
<td colspan="3">折疊內容1</td>
</tr>
<tr id="hidden2" class="hidden">
<td colspan="3">折疊內容2</td>
</tr>
<tr id="hidden3" class="hidden">
<td colspan="3">折疊內容3</td>
</tr>
</tbody>
</table>

經過以上步驟，我們就可以實現表格的折疊功能，讓內容更加清晰、簡潔，方便用戶閱讀。