移动端宽度小于480px时如何将表格列转为行展示（不可改table为div）

你的原有代码不生效的核心原因是没有配套修改<tr>的布局规则，同时border-collapse: collapse的合并规则会干扰修改display属性后的边框和布局渲染。调整后的完整代码如下：

完整CSS代码 #

table, th, td {
  border: 1px solid black;
}

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

@media(max-width: 480px) {
  .main tr {
    display: block;
    margin-bottom: 8px;
  }
  .main td {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border-bottom: none;
  }
  .main td:last-child {
    border-bottom: 1px solid black;
  }
}

修改点说明 #

• 给表格新增width: 100%属性，保证表格在不同设备上都能适配父容器宽度
• 移动端下将原表格行<tr>改为块级元素，作为每一组行内容的独立容器，避免不同原行的内容互相干扰
• 将<td>改为块级元素，自动占满整行宽度，实现第二列落到第一列下方的效果
• 调整边框规则，避免上下相邻的两个<td>出现双倍边框，和原有边框样式保持一致

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