/* 默认显示所有列 */
.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; /* 超出部分显示省略号 */
}
}
