More actions
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
@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;
}
}