展開與收起表格是CSS中的常見需求，通常用于創(chuàng)建可折疊的表格內(nèi)容，下面是一些實(shí)現(xiàn)表格展開與收起的CSS代碼示例：

1、定義一個(gè)可折疊的表格：

<table class="collapsible">
  <tr>
    <td>標(biāo)題1</td>
    <td>標(biāo)題2</td>
  </tr>
  <tr class="content">
    <td colspan="2">內(nèi)容1</td>
  </tr>
  <tr class="content">
    <td colspan="2">內(nèi)容2</td>
  </tr>
  <tr>
    <td>標(biāo)題3</td>
    <td>標(biāo)題4</td>
  </tr>
  <tr class="content">
    <td colspan="2">內(nèi)容3</td>
  </tr>
  <tr class="content">
    <td colspan="2">內(nèi)容4</td>
  </tr>
</table>

2、使用CSS來定義展開與收起的樣式：

.collapsible {
  width: 100%;
}
.content {
  display: none; /* 初始狀態(tài)為隱藏 */
}
.collapsible:hover {
  background-color: #f5f5f5; /* 鼠標(biāo)懸停時(shí)的背景色 */
}

3、通過JavaScript來切換展開與收起狀態(tài)：

var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active"); /* 點(diǎn)擊時(shí)切換“active”類 */
    var content = this.nextElementSibling; /* 獲取下一個(gè)元素（即內(nèi)容） */
    if (content.style.display === "block") { /* 如果內(nèi)容已顯示，則隱藏 */
      content.style.display = "none";
    } else { /* 如果內(nèi)容已隱藏，則顯示 */
      content.style.display = "block";
    }
  });
}

通過以上代碼，您可以輕松地實(shí)現(xiàn)表格的展開與收起功能，使用CSS來定義初始狀態(tài)和懸停狀態(tài)下的樣式，然后使用JavaScript來處理點(diǎn)擊事件并切換展開與收起狀態(tài)。