使用CSS实现无表头4列表格移动端自动转为2列布局

修正方案 #

你原来的CSS是针对带表头、自定义属性的复杂响应式表格场景编写的，和你当前单行列4个单元格的需求不匹配，直接替换为以下CSS即可实现预期效果：

table {
  width: 100%;
  border-collapse: collapse;
  background: rgb(196, 215, 70);
}

tr:nth-child(2n) {
  background: lightblue;
}

th, td {
  box-shadow: inset 0 0 0 2px;
  text-align: center;
  vertical-align: middle;
  padding: 0.5em;
}

/* 移动端响应式规则 */
@media screen and (max-width: 600px) {
  table {
    display: flex;
    flex-wrap: wrap;
  }
  tbody, tr {
    display: contents;
  }
  td {
    width: 50%;
    box-sizing: border-box;
  }
}

修改说明 #

• 删除了原本冗余的@supports判断、伪元素生成内容、order排序等不匹配你需求的逻辑，这部分代码是导致出现4x4异常布局的核心原因
• 将响应式断点调整为你要求的600px
• 移动端通过flex布局+换行实现每行2列的效果，display: contents用来解除tr、tbody的布局限制，让td直接作为table flex容器的子元素排列
• 给td加box-sizing: border-box保证边框、内边距不会撑爆50%的宽度

测试效果完全匹配你的预期：

• 桌面端：原生表格布局，一行4列展示A、B、C、D
• 宽度小于600px的移动端：自动换行，第一行展示A、B，第二行展示C、D

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