要实现保留手风琴和展开的表格行的状态，可以使用一些JavaScript和CSS来实现。以下是一个基本的解决方案示例：

HTML部分：

  

    

      
行1
    
    

      
内容1
    
    

      
行2
    
    

      
内容2
    
    

      
行3
    
    

      
内容3
    
  

CSS部分：

.accordion-content {
  display: none;
}

.accordion-toggle.active + .accordion-content {
  display: table-row;
}

JavaScript部分：

// 获取所有的手风琴行
var accordionToggles = document.getElementsByClassName('accordion-toggle');

// 给每个手风琴行添加点击事件
for (var i = 0; i < accordionToggles.length; i++) {
  accordionToggles[i].addEventListener('click', function() {
    // 切换手风琴行的active类
    this.classList.toggle('active');

    // 查找当前手风琴行的下一个兄弟元素
    var accordionContent = this.nextElementSibling;

    // 切换下一个兄弟元素的display属性
    if (accordionContent.style.display === 'table-row') {
      accordionContent.style.display = 'none';
    } else {
      accordionContent.style.display = 'table-row';
    }
  });
}

这段代码首先定义了两个CSS类，其中 .accordion-content 类用于隐藏内容行，.accordion-toggle.active + .accordion-content 类用于显示已展开的内容行。

然后使用JavaScript获取所有的手风琴行，并为每个手风琴行添加点击事件。当点击手风琴行时，切换手风琴行的 active 类，并通过 nextElementSibling 属性找到手风琴行的下一个兄弟元素（即内容行），然后根据该内容行的 display 属性进行切换显示或隐藏。

这样，当点击手风琴行时，对应的内容行将展开或收起。