如何用CSS实现响应式表格的列重排与移动端自定义布局？

针对你需要的响应式表格布局，以下是修正后的CSS方案，解决了表头偏移、元素位置不固定的问题，完全通过CSS实现无需JS：

核心调整说明 #

1. 统一处理表头(th)和数据单元格(td)的布局规则，确保表头与数据行对齐
2. 使用明确的网格行列定位替代order属性，精准控制每个元素位置
3. 简化桌面端网格模板写法，增强可读性

完整代码 #

CSS #

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
}

.col1 { background-color: #f2f2f2; }
.col2 { background-color: #e6f2ff; }
.col3 { background-color: #f2e6ff; }
.col4 { background-color: #ffffcc; }
.col5 { background-color: #e6ffe6; }
.col6 { background-color: #ffe6e6; }

/* 桌面端：6列等宽布局 */
tr.ligne {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 0;
}

/* 移动端（≤500px）：自定义布局 */
@media only screen and (max-width: 500px) {
  tr.ligne {
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: auto;
    margin-bottom: 8px; /* 行间距，提升可读性 */
  }

  /* D1：右上角第一行 */
  tr.ligne > *:nth-child(1) {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }

  /* D2：左侧占2行 */
  tr.ligne > *:nth-child(2) {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
  }

  /* D3：底部占满右侧整宽 */
  tr.ligne > *:nth-child(3) {
    grid-column: 2 / 6;
    grid-row: 2 / 3;
  }

  /* D4：右上角第一行第2位 */
  tr.ligne > *:nth-child(4) {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
  }

  /* D5：右上角第一行第3位 */
  tr.ligne > *:nth-child(5) {
    grid-column: 4 / 5;
    grid-row: 1 / 2;
  }

  /* D6：右上角第一行第4位 */
  tr.ligne > *:nth-child(6) {
    grid-column: 5 / 6;
    grid-row: 1 / 2;
  }
}

HTML #

<h2>HTML Table</h2>

<table>
  <tr class="ligne">
    <th>D1</th>
    <th>D2</th>
    <th>D3</th>
    <th>D4</th>
    <th>D5</th>
    <th>D6</th>
  </tr>
  <tr class="ligne">
    <td class="col1">Row 1, Col 1</td>
    <td class="col2">Row 1, Col 2</td>
    <td class="col3">Row 1, Col 3</td>
    <td class="col4">Row 1, Col 4</td>
    <td class="col5">Row 1, Col 5</td>
    <td class="col6">Row 1, Col 6</td>
  </tr>
  <tr class="ligne">
    <td class="col1">Row 2, Col 1</td>
    <td class="col2">Row 2, Col 2</td>
    <td class="col3">Row 2, Col 3</td>
    <td class="col4">Row 2, Col 4</td>
    <td class="col5">Row 2, Col 5</td>
    <td class="col6">Row 2, Col 6</td>
  </tr>
  <tr class="ligne">
    <td class="col1">Row 3, Col 1</td>
    <td class="col2">Row 3, Col 2</td>
    <td class="col3">Row 3, Col 3</td>
    <td class="col4">Row 3, Col 4</td>
    <td class="col5">Row 3, Col 5</td>
    <td class="col6">Row 3, Col 6</td>
  </tr>
  <tr class="ligne">
    <td class="col1">Row 4, Col 1</td>
    <td class="col2">Row 4, Col 2</td>
    <td class="col3">Row 4, Col 3</td>
    <td class="col4">Row 4, Col 4</td>
    <td class="col5">Row 4, Col 5</td>
    <td class="col6">Row 4, Col 6</td>
  </tr>
  <tr class="ligne">
    <td class="col1">Row 5, Col 1</td>
    <td class="col2">Row 5, Col 2</td>
    <td class="col3">Row 5, Col 3</td>
    <td class="col4">Row 5, Col 4</td>
    <td class="col5">Row 5, Col 5</td>
    <td class="col6">Row 5, Col 6</td>
  </tr>
</table>

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