More actions
No edit summary |
No edit summary |
||
Line 2: | Line 2: | ||
@import url("/res/Common/css/materialdesignicons.min.css"); | @import url("/res/Common/css/materialdesignicons.min.css"); | ||
. | .prettytable { | ||
text-align: center; | text-align: center; | ||
} | } | ||
/* 表头单元格的样式 */ | /* 表头单元格的样式 */ | ||
. | .prettytable th { | ||
background-color: #646262; /* 背景颜色 */ | background-color: #646262; /* 背景颜色 */ | ||
color: #ffffff; /* 字体颜色 */ | color: #ffffff; /* 字体颜色 */ | ||
Line 17: | Line 17: | ||
/* 表头行的样式 */ | /* 表头行的样式 */ | ||
. | .prettytable thead tr { | ||
background-color: #646262; /* 行背景颜色 */ | background-color: #646262; /* 行背景颜色 */ | ||
} | } | ||
. | .prettytable td { | ||
min-width: 100px; | min-width: 100px; | ||
border: 1px solid #646262; | border: 1px solid #646262; | ||
Line 28: | Line 28: | ||
/* 固定第一列的样式 */ | /* 固定第一列的样式 */ | ||
. | .prettytable th:first-child, | ||
. | .prettytable td:first-child { | ||
position: -webkit-sticky; /* Safari */ | position: -webkit-sticky; /* Safari */ | ||
position: sticky; | position: sticky; | ||
Line 36: | Line 36: | ||
border: 1px solid #646262; | border: 1px solid #646262; | ||
} | } | ||
. | .prettytable td:first-child { | ||
background-color: #f2f4f8; | background-color: #f2f4f8; | ||
} | } | ||
Line 42: | Line 42: | ||
/* 小屏幕(如手机) */ | /* 小屏幕(如手机) */ | ||
@media (max-width: 600px) { | @media (max-width: 600px) { | ||
. | .prettytable { | ||
min-width: 100%; | min-width: 100%; | ||
} | } | ||
Line 49: | Line 49: | ||
/* 中等屏幕(如平板电脑) */ | /* 中等屏幕(如平板电脑) */ | ||
@media (min-width: 601px) and (max-width: 1024px) { | @media (min-width: 601px) and (max-width: 1024px) { | ||
. | .prettytable { | ||
min-width: 600px; | min-width: 600px; | ||
} | } | ||
Line 56: | Line 56: | ||
/* 大屏幕(如桌面电脑) */ | /* 大屏幕(如桌面电脑) */ | ||
@media (min-width: 1025px) { | @media (min-width: 1025px) { | ||
. | .prettytable { | ||
min-width: 600px; | min-width: 600px; | ||
} | } | ||
} | } |
Latest revision as of 21:41, 20 July 2024
@import url("/res/Common/css/vuetify.min.css");
@import url("/res/Common/css/materialdesignicons.min.css");
.prettytable {
text-align: center;
}
/* 表头单元格的样式 */
.prettytable th {
background-color: #646262; /* 背景颜色 */
color: #ffffff; /* 字体颜色 */
padding: 10px; /* 内边距 */
text-align: center; /* 文本居中对齐 */
border-bottom: 2px solid #646262; /* 底部边框 */
font-weight: bold; /* 字体加粗 */
}
/* 表头行的样式 */
.prettytable thead tr {
background-color: #646262; /* 行背景颜色 */
}
.prettytable td {
min-width: 100px;
border: 1px solid #646262;
border-collapse: collapse; /* 使边框合并成一个 */
}
/* 固定第一列的样式 */
.prettytable th:first-child,
.prettytable td:first-child {
position: -webkit-sticky; /* Safari */
position: sticky;
left: 0;
z-index: 1; /* 确保固定列在前面 */
border: 1px solid #646262;
}
.prettytable td:first-child {
background-color: #f2f4f8;
}
/* 小屏幕(如手机) */
@media (max-width: 600px) {
.prettytable {
min-width: 100%;
}
}
/* 中等屏幕(如平板电脑) */
@media (min-width: 601px) and (max-width: 1024px) {
.prettytable {
min-width: 600px;
}
}
/* 大屏幕(如桌面电脑) */
@media (min-width: 1025px) {
.prettytable {
min-width: 600px;
}
}