如何让Accordion内的表格实现响应式？flex-wrap:wrap尝试无效

原生<table>元素自带table布局模式，默认布局规则优先级高于flex属性，直接给table设置flex-wrap: wrap不会触发行/列的换行效果，以下是两种适配方案：

方案1：小屏转堆叠卡片布局（匹配目标响应式效果） #

通过媒体查询在移动端视口下重置表格元素的display属性，同时给每个单元格绑定对应表头文本，实现每一行数据转为独立卡片、表头字段作为前缀展示的效果：

1. 先给所有td标签加data-label属性，属性值和对应的表头文本保持一致，示例如下：

   <td data-label="菜品名称">土耳其烤肉卷</td>
   <td data-label="规格">大号</td>
   <td data-label="价格">€7.5</td>
   

2. 添加对应CSS规则：

   /* 给手风琴里包裹表格的外层容器加这个类 */
   .accordion-table-wrapper {
     width: 100%;
   }
   
   /* 桌面端默认表格样式 */
   .accordion-table-wrapper table {
     width: 100%;
     border-collapse: collapse;
   }
   .accordion-table-wrapper th,
   .accordion-table-wrapper td {
     padding: 8px 12px;
     border: 1px solid #eee;
     text-align: left;
   }
   
   /* 移动端适配，断点可根据站点需求调整，示例为768px */
   @media (max-width: 768px) {
     /* 隐藏原有表头 */
     .accordion-table-wrapper thead {
       display: none;
     }
     /* 所有表格元素转为块级 */
     .accordion-table-wrapper table,
     .accordion-table-wrapper tbody,
     .accordion-table-wrapper tr,
     .accordion-table-wrapper td {
       display: block;
       width: 100%;
       box-sizing: border-box;
     }
     /* 每一行作为独立卡片，加间距和边框 */
     .accordion-table-wrapper tr {
       margin-bottom: 16px;
       border: 1px solid #eee;
     }
     /* 单元格布局调整，插入表头文本 */
     .accordion-table-wrapper td {
       display: flex;
       justify-content: space-between;
       padding: 8px 12px;
       border: none;
       border-bottom: 1px solid #eee;
     }
     .accordion-table-wrapper td::before {
       content: attr(data-label);
       font-weight: 600;
       margin-right: 12px;
     }
     .accordion-table-wrapper td:last-child {
       border-bottom: none;
     }
   }
   

方案2：横向滚动适配（无需修改表格结构的轻量方案） #

如果不想调整表格HTML结构，可以给表格外层加滚动容器，小屏时允许横向滑动查看内容：

.accordion-table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* 优化移动端滚动手感 */
}
.accordion-table-wrapper table {
  min-width: 600px; /* 可根据实际内容调整最小宽度，避免文字挤缩 */
}

内容的提问来源于stack exchange，提问作者Mario Mo