/* 默认显示所有列 */.my-table th, .my-table td { /* ... 基础样式 ... */}/* 在小屏幕上隐藏不那么重要的列 */@media (max-width: 768px) { .my-table .hide-on-mobile { display: none; /* 隐藏带有此类的列 */ }}
| 订单号 | 客户姓名 | 金额 | 状态 |
|---|---|---|---|
| ORD2023001 | 张三 | ¥1200.00 | 已完成 |
@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; /* 超出部分显示省略号 */ }}
以上就是HTML数据表格怎么优化？移动端友好的6种响应式技巧的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1568854.html
微信扫一扫 
支付宝扫一扫 
