如何为Table的display:none/block状态添加过渡动画？

要实现手风琴下方表格的平滑展开/收起动画，不能直接使用display: none/block（该属性不支持CSS过渡），我们可以通过max-height属性配合过渡效果来实现。以下是修改后的完整代码：

完整代码 #

HTML #

<div class="main">
  <button class="accordion">
      John Doe
  </button>
  <div class="panel">
      <table>
          <th>company</th>
          <th>department</th>
          <th>2025?</th>
          <tr>
              <td>COMPANY A</td>
              <td>FINANCE</td>
              <td>&#9989;</td>
          </tr>
          <tr>
              <td>COMPANY Z</td>
              <td>PMO</td>
              <td>&#10060;</td>
          </tr>
      </table>
  </div>
  <button class="accordion">
      John Doe
  </button>
  <div class="panel">
      <table>
          <th>company</th>
          <th>department</th>
          <th>2025?</th>
          <tr>
               <td>company A</td>
              <td>HR</td>
              <td>&#10060;</td>
          </tr>
          <tr>
             <td>company B</td>
              <td>HR</td>
              <td>&#10060;</td>
          </tr>
          <tr>
                <td>company C</td>
              <td>HR</td>
              <td>&#10060;</td>
          </tr>
      </table>
  </div>
  <button class="accordion">
      John Doe
  </button>
  <div class="panel">
      <table>
          <th>company</th>
          <th>department</th>
           <th>2025?</th>
          <tr>
              <td>company A</td>
              <td>HR</td>
              <td>&#9989;</td>
          </tr>
      </table>
  </div>       
</div>

CSS #

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: White;
  font-family: Sakkal Majalla;
  direction: rtl;
  position: relative;
  z-index: -2;
  -ms-overflow-style: none;
}
body::-webkit-scrollbar, body::-webkit-scrollbar-button { display: none; } /* Chrome */

li {
  list-style: none;
}

a {
  text-decoration: none;
}

.main{    
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

table {
  border: 1px solid #dededf;  
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 1px;
  text-align: center;
  width: 100%; /* 让表格填满面板宽度 */
}

th {
  border: 1px solid #dededf;
  background-color: #eceff1;
  color: #000000;
  padding: 5px;
}

td {
  border: 1px solid #dededf;
  background-color: #ffffff;
  color: #000000;
  padding: 5px;  
}
th:nth-child(1) {  
  width: 30.9rem;
}

th:nth-child(2) {  
  width: 10rem;
}
th:nth-child(3) {  
  width: 7rem;
}

.accordion {
  background-color: #ffffff;
  color: black;
  font-weight: bold;
  cursor: pointer;
  margin-top: 20px;
  padding: 18px;
  border: none;
  text-align: right;
  outline: none;
  font-size: 20px;
  transition: 0.4s;
  width: 50rem;
  border: 1px solid rgb(219, 219, 219);
  border-radius: 8px;
  box-shadow: rgba(100, 100, 111, 0.123) 0px 7px 29px 0px;
}

.active, .accordion:hover {
  border-radius: 8px 8px 0px 0px;
  border-color:  rgb(0, 128, 255);
}

.accordion span{
  float: left;
  font-size: 15px;
  color: #116ce4;
}

/* 修改后的面板样式，支持过渡动画 */
.panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  border: 1px solid rgb(219, 219, 219);
  border-top: none;
  border-radius: 0 0 8px 8px;
  width: 50rem;
  box-sizing: border-box;
  padding: 0 18px;
}

.panel.active {
  max-height: 2000px; /* 足够大的值，确保容纳所有表格内容 */
  padding: 18px;
}

JavaScript #

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    panel.classList.toggle("active");
  });
}

核心修改说明 #

1. CSS部分：移除了.panel的display: none，改用max-height: 0隐藏内容，添加transition: max-height 0.4s ease实现平滑过渡；给.panel.active设置足够大的max-height来展开内容，同时调整边框和内边距，让面板与上方按钮样式更连贯。
2. JavaScript部分：不再操作display属性，改为给.panel切换active类来控制展开/收起。

内容的提问来源于stack exchange，提问作者C3ISR - Everything Cybersecuri