能否通过HTML和CSS实现表格随容器宽度自适应拆分列？

完全可以通过HTML和CSS实现这个需求，核心思路是利用CSS媒体查询结合网格（Grid）或多列布局，根据容器宽度自动切换显示方式。以下是两种实用方案：

方案一：单表头+多列内容（纯CSS） #

适合不需要每列重复表头的场景，宽屏下将表格内容拆分为多列，表头横跨所有列。

HTML结构 #

<div class="responsive-table">
  <table>
    <thead>
      <tr>
        <th>序号</th>
        <th>项目名称</th>
        <th>数值</th>
      </tr>
    </thead>
    <tbody>
      <!-- 插入你的100+行数据 -->
      <tr><td>1</td><td>产品A</td><td>120</td></tr>
      <tr><td>2</td><td>产品B</td><td>240</td></tr>
      <tr><td>3</td><td>产品C</td><td>180</td></tr>
      <!-- 更多行... -->
    </tbody>
  </table>
</div>

CSS样式 #

/* 基础样式：窄屏下单列显示 */
.responsive-table table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}
.responsive-table th, .responsive-table td {
  border: 1px solid #eee;
  padding: 0.8rem;
  text-align: left;
}
.responsive-table th {
  background-color: #f5f5f5;
}

/* 宽屏下切换为多列布局 */
@media (min-width: 1200px) {
  .responsive-table table {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 拆分为2列，可调整为3列等 */
    gap: 1.5rem;
  }
  /* 表头横跨所有列 */
  .responsive-table thead {
    grid-column: 1 / -1;
  }
  /* 表格主体拆分为对应列数 */
  .responsive-table tbody {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  /* 每行作为独立表格单元，保持原有结构 */
  .responsive-table tbody tr {
    display: table;
    width: 100%;
    border-collapse: collapse;
  }
}

方案二：每列重复表头（CSS+少量JS辅助） #

如果需要宽屏下每一列都带独立表头，可通过JS复制表头到每个分组，再用CSS布局。

HTML结构 #

<div class="multi-header-table">
  <!-- 原始表格 -->
  <table class="original-table">
    <thead>
      <tr>
        <th>序号</th>
        <th>项目名称</th>
        <th>数值</th>
      </tr>
    </thead>
    <tbody id="table-body">
      <!-- 100+行数据 -->
      <tr><td>1</td><td>产品A</td><td>120</td></tr>
      <tr><td>2</td><td>产品B</td><td>240</td></tr>
      <!-- 更多行... -->
    </tbody>
  </table>
</div>

CSS样式 #

.multi-header-table {
  width: 100%;
  margin: 1rem 0;
}
.original-table {
  width: 100%;
  border-collapse: collapse;
}
.original-table th, .original-table td {
  border: 1px solid #eee;
  padding: 0.8rem;
  text-align: left;
}
.original-table th {
  background-color: #f5f5f5;
}

/* 宽屏下切换为多列网格 */
@media (min-width: 1200px) {
  .multi-header-table {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  .table-group {
    display: table;
    width: 100%;
    border-collapse: collapse;
  }
}

/* 窄屏下隐藏分组，只显示原始表格 */
@media (max-width: 1199px) {
  .table-group {
    display: none;
  }
}

辅助JS（仅用于复制表头和拆分行） #

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  const tbody = document.getElementById('table-body');
  const rows = Array.from(tbody.querySelectorAll('tr'));
  const columnCount = 2; // 拆分列数，与CSS对应
  const rowsPerColumn = Math.ceil(rows.length / columnCount);
  
  // 复制表头模板
  const theadTemplate = document.querySelector('.original-table thead').cloneNode(true);
  
  // 创建每个列的表格分组
  for (let i = 0; i < columnCount; i++) {
    const group = document.createElement('div');
    group.className = 'table-group';
    
    const table = document.createElement('table');
    table.appendChild(theadTemplate.cloneNode(true));
    
    const groupTbody = document.createElement('tbody');
    // 截取对应行范围
    const groupRows = rows.slice(i * rowsPerColumn, (i + 1) * rowsPerColumn);
    groupRows.forEach(row => groupTbody.appendChild(row.cloneNode(true)));
    
    table.appendChild(groupTbody);
    group.appendChild(table);
    document.querySelector('.multi-header-table').prepend(group);
  }
  
  // 窄屏下保留原始表格，宽屏下隐藏
  const originalTable = document.querySelector('.original-table');
  function toggleOriginalTable() {
    originalTable.style.display = window.innerWidth >= 1200 ? 'none' : 'table';
  }
  toggleOriginalTable();
  window.addEventListener('resize', toggleOriginalTable);
});

说明 #

• 可根据实际需求调整媒体查询的宽度阈值（如1200px）和拆分列数（repeat(2, 1fr)中的2）。
• 方案一纯CSS实现，适合简单场景；方案二通过少量JS实现每列带表头，体验更友好。

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