收斂管理頁手機表格排版
All checks were successful
CD Pipeline / deploy (push) Successful in 56s

This commit is contained in:
OoO
2026-05-13 23:44:32 +08:00
parent 15b5b79a51
commit 178f94574b
6 changed files with 388 additions and 3 deletions

View File

@@ -107,6 +107,84 @@
color: rgba(255, 255, 255, 0.75);
}
@media (max-width: 760px) {
.table-container {
padding: 12px;
}
.table-container .table-responsive {
overflow-x: visible;
}
.table-container table,
.table-container tbody,
.table-container tr,
.table-container td {
display: block;
width: 100%;
}
.table-container table {
min-width: 0;
border-collapse: separate;
border-spacing: 0;
}
.table-container thead {
display: none;
}
.table-container tbody {
display: grid;
gap: 10px;
}
.table-container tbody tr {
overflow: hidden;
border: 1px solid #e5dccd;
border-radius: 8px;
background: #fffaf1;
}
.table-container tbody td {
display: grid;
grid-template-columns: 5.8rem minmax(0, 1fr);
gap: 10px;
padding: 10px 12px;
border-bottom: 1px solid #e5dccd;
text-align: left !important;
overflow-wrap: anywhere;
}
.table-container tbody td:last-child {
border-bottom: 0;
}
.table-container tbody td::before {
color: #8b8174;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 11px;
font-weight: 800;
}
.table-container tbody td:nth-child(1)::before { content: "ID"; }
.table-container tbody td:nth-child(2)::before { content: "批次"; }
.table-container tbody td:nth-child(3)::before { content: "廠商"; }
.table-container tbody td:nth-child(4)::before { content: "收件"; }
.table-container tbody td:nth-child(5)::before { content: "主旨"; }
.table-container tbody td:nth-child(6)::before { content: "商品"; }
.table-container tbody td:nth-child(7)::before { content: "狀態"; }
.table-container tbody td:nth-child(8)::before { content: "時間"; }
.table-container tbody td[colspan] {
display: block;
}
.table-container tbody td[colspan]::before {
content: none;
}
}
</style>
</head>
<body>

View File

@@ -138,6 +138,84 @@
.stats-card:hover {
transform: translateY(-5px);
}
@media (max-width: 760px) {
.table-container .table-responsive {
overflow-x: visible;
}
.table-container table,
.table-container tbody,
.table-container tr,
.table-container td {
display: block;
width: 100%;
}
.table-container table {
min-width: 0;
border-collapse: separate;
border-spacing: 0;
}
.table-container thead {
display: none;
}
.table-container tbody {
display: grid;
gap: 10px;
padding: 12px;
}
.table-container tbody tr {
overflow: hidden;
border: 1px solid #e5dccd;
border-radius: 8px;
background: #fffaf1;
}
.table-container tbody td {
display: grid;
grid-template-columns: 5.8rem minmax(0, 1fr);
gap: 10px;
padding: 10px 12px;
border-bottom: 1px solid #e5dccd;
text-align: left !important;
overflow-wrap: anywhere;
}
.table-container tbody td:last-child {
border-bottom: 0;
}
.table-container tbody td::before {
color: #8b8174;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 11px;
font-weight: 800;
}
.table-container tbody td:nth-child(1)::before { content: "代碼"; }
.table-container tbody td:nth-child(2)::before { content: "廠商"; }
.table-container tbody td:nth-child(3)::before { content: "郵件"; }
.table-container tbody td:nth-child(4)::before { content: "數量"; }
.table-container tbody td:nth-child(5)::before { content: "操作"; }
.table-container tbody td[colspan] {
display: block;
}
.table-container tbody td[colspan]::before {
content: none;
}
.table-container tbody td:last-child {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
}
</style>
</head>
<body>