响应式表格展示效果不符合预期，请问是什么原因？如何解决？

修复方案 #

你当前的代码仅将表格元素转为块级，未处理单元格布局和内容映射，按以下修改CSS即可实现预期效果：

第一步：修正原有CSS作用域问题

原有.i_table td, th选择器会影响全局所有th元素，调整为：

.i_table td,
.i_table th {
  padding: 6px;
  border: 1px solid #ccc;
  text-align: left;
}

第二步：替换移动端媒体查询内的规则

@media all and (max-width:500px) {
  .i_table table,
  .i_table tbody,
  .i_table tr,
  .i_table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  /* 分隔每行数据，形成卡片效果 */
  .i_table tr {
    margin-bottom: 12px;
    border: 1px solid #ccc;
  }
  /* 去掉单元格默认边框，调整内边距预留标签位置 */
  .i_table td {
    border: none;
    border-bottom: 1px solid #eee;
    padding: 6px 6px 6px 45%;
    position: relative;
  }
  /* 单元格前插入对应列标签 */
  .i_table td::before {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 40%;
    font-weight: bold;
    white-space: nowrap;
  }
  /* 自定义各列标签内容 */
  .i_table td:nth-of-type(1)::before {
    content: "Title-1";
  }
  .i_table td:nth-of-type(2)::before {
    content: "Title-2";
  }
  /* 可选：如果表格内的标题行（如Title-3/Title-4所在行）不需要在移动端展示，可给对应tr加类名`table-header`，添加以下规则隐藏 */
  /* .i_table tr.table-header {
    display: none;
  } */
}

如果需要更灵活的标签配置，不需要硬编码内容，可以给每个td添加data-label属性，比如<td data-label="Title-1">A</td>，然后将::before的content改为content: attr(data-label);即可。

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