如何用CSS/jQuery实现响应式表格拆分并匹配附件样式

嘿，我来帮你搞定这个响应式表格的改造！针对你给出的桌面端表格结构，我准备了两种实用方案——纯CSS（优先推荐，轻量无依赖）和jQuery方案，都能实现你要的列拆分响应式效果：

这个方案不需要额外JS，靠CSS媒体查询就能实现移动端列拆分堆叠的效果，先给你完善后的HTML结构（需要给每个内容单元格加data-label属性，用来在移动端显示对应表头）：

<table border="1">
  <thead>
    <tr>
      <th>Main Title 1</th>
      <th>Main Title 2</th>
    </tr>
  </thead>
  <tbody>
    <tr class="sub-title">
      <td colspan="2">Sub Title 1</td>
    </tr>
    <tr>
      <td data-label="Main Title 1">Content 1-1</td>
      <td data-label="Main Title 2">Content 1-2</td>
    </tr>
    <tr>
      <td data-label="Main Title 1">Content 2-1</td>
      <td data-label="Main Title 2">Content 2-2</td>
    </tr>
  </tbody>
</table>

然后是核心CSS代码，通过媒体查询在小屏幕（比如宽度≤768px）时调整表格布局：

/* 基础表格样式，可根据你的设计调整 */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}
th, td {
  border: 1px solid #ddd;
  padding: 0.75rem;
  text-align: left;
}
.sub-title td {
  background-color: #f5f5f5;
  font-weight: bold;
}

/* 响应式适配：小屏幕下拆分列 */
@media (max-width: 768px) {
  /* 隐藏原生表头 */
  thead {
    display: none;
  }
  
  /* 把表格行变成块级元素，堆叠显示 */
  tbody tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #ddd;
  }
  
  /* 单元格变成块级，占满宽度，通过伪元素显示表头 */
  tbody td {
    display: block;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    padding-left: 40%; /* 给表头文字留出空间 */
  }
  
  /* 用data-label的内容生成表头文字，放在单元格左侧 */
  tbody td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    top: 0;
    width: 35%;
    padding: 0.75rem;
    background-color: #f0f0f0;
    font-weight: bold;
    border-right: 1px solid #ddd;
  }
  
  /* 处理子标题行，保持全屏显示，去掉伪元素和左侧内边距 */
  tbody tr.sub-title td {
    padding-left: 0.75rem;
    text-align: center;
  }
  tbody tr.sub-title td::before {
    content: none;
  }
}

如果你不想手动给每个单元格加data-label，可以用jQuery动态添加，同时处理窗口大小变化的适配：

$(document).ready(function() {
  // 定义响应式转换函数
  function convertToResponsive() {
    const windowWidth = $(window).width();
    const targetTable = $('table');
    // 获取表头文字数组
    const headerTexts = targetTable.find('thead th').map(function() {
      return $(this).text();
    }).get();

    if (windowWidth <= 768) {
      // 小屏幕下启用响应式布局
      targetTable.find('thead').hide();
      targetTable.find('tbody tr:not(.sub-title)').each(function() {
        const $row = $(this);
        $row.find('td').each(function(index) {
          const $cell = $(this);
          // 仅当没有data-label时添加
          if (!$cell.attr('data-label')) {
            $cell.attr('data-label', headerTexts[index]);
          }
        });
        $row.addClass('responsive-row');
      });
    } else {
      // 大屏幕恢复原生表格布局
      targetTable.find('thead').show();
      targetTable.find('tbody tr').removeClass('responsive-row');
      targetTable.find('td').removeAttr('data-label');
    }
  }

  // 页面加载时执行一次
  convertToResponsive();
  // 窗口大小变化时重新适配
  $(window).resize(convertToResponsive);
});

这个方案的CSS可以复用上面纯CSS方案里的媒体查询代码，jQuery只是帮你自动处理data-label的添加和移除。

你可以根据附件里的设计图，调整CSS里的颜色、内边距、媒体查询的宽度阈值等，完全匹配你的需求~

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