使用CSS从带有隐藏行的div创建表

<div class="table-container">
  <div class="table-row header">
    <div class="table-cell">表头1</div>
    <div class="table-cell">表头2</div>
    <div class="table-cell">表头3</div>
  </div>
  <div class="table-row">
    <div class="table-cell">数据1</div>
    <div class="table-cell">数据2</div>
    <div class="table-cell">数据3</div>
  </div>
  <div class="table-row">
    <div class="table-cell">数据4</div>
    <div class="table-cell">数据5</div>
    <div class="table-cell">数据6</div>
  </div>
</div>

.table-container {
  display: table;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
  padding: 5px;
  border: 1px solid #ccc;
}

.hidden-row {
  display: none;
}

// 示例：点击按钮时显示/隐藏隐藏行
const toggleButton = document.getElementById('toggle-button');
const hiddenRow = document.querySelector('.hidden-row');

toggleButton.addEventListener('click', () => {
  hiddenRow.classList.toggle('hidden-row');
});