HTML数据表格怎么优化？移动端友好的6种响应式技巧

/* 默认显示所有列 */
.my-table th, .my-table td {
  /* ... 基础样式 ... */
}

/* 在小屏幕上隐藏不那么重要的列 */
@media (max-width: 768px) {
  .my-table .hide-on-mobile {
    display: none; /* 隐藏带有此类的列 */
  }
}

<table>
  <thead>
    <tr>
      <th>订单号</th>
      <th>客户姓名</th>
      <th>金额</th>
      <th>状态</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="订单号">ORD2023001</td>
      <td data-label="客户姓名">张三</td>
      <td data-label="金额">¥1200.00</td>
      <td data-label="状态">已完成</td>
    </tr>
    <!-- 更多行 -->
  </tbody>
</table>

@media (max-width: 600px) {
  table, thead, tbody, th, td, tr {
    display: block; /* 将所有表格元素转换为块级 */
  }

  /* 隐藏原始表头 */
  thead tr {
    position: absolute; /* 或者 display: none; */
    top: -9999px;
    left: -9999px;
  }

  /* 样式化每一行作为卡片 */
  tr {
    border: 1px solid #eee;
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }

  /* 样式化每个单元格 */
  td {
    border: none; /* 移除单元格边框 */
    border-bottom: 1px dashed #eee; /* 添加底部虚线分隔 */
    position: relative;
    padding-left: 50%; /* 为伪元素留出空间 */
    text-align: right; /* 数据右对齐 */
    min-height: 25px; /* 确保有最小高度 */
  }
  td:last-child {
    border-bottom: none; /* 最后一个单元格没有底部边框 */
  }

  /* 使用伪元素显示列标题 */
  td::before {
    content: attr(data-label); /* 获取data-label的值作为内容 */
    position: absolute;
    left: 6px;
    width: 45%; /* 标题占据的宽度 */
    font-weight: bold;
    text-align: left; /* 标题左对齐 */
    white-space: nowrap; /* 避免标题换行 */
    overflow: hidden;
    text-overflow: ellipsis; /* 超出部分显示省略号 */
  }
}