This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user