126 lines
2.6 KiB
SCSS
126 lines
2.6 KiB
SCSS
:root {
|
|
--table-max-height: 500px;
|
|
--border-color: #ddd;
|
|
--header-bg-color: #f1f1f1;
|
|
--header-text-color: #555;
|
|
--row-hover-color: #e8e5f9;
|
|
--even-row-color: #f3f3f3;
|
|
--scrollbar-width: 6px;
|
|
--scrollbar-thumb-color: #bbb;
|
|
--scrollbar-thumb-hover-color: #888;
|
|
--scrollbar-track-color: #f4f4f4;
|
|
--font-family: Arial, sans-serif;
|
|
--font-size: 0.9rem;
|
|
--cell-padding: 12px 15px;
|
|
--border-radius: 5px;
|
|
--table-bg-color: #f8f9fa;
|
|
}
|
|
|
|
.table-responsive {
|
|
max-height: var(--table-max-height);
|
|
overflow: auto;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius);
|
|
background-color: var(--table-bg-color);
|
|
padding: 10px;
|
|
}
|
|
|
|
.sticky-top-table {
|
|
position: relative;
|
|
}
|
|
|
|
.sticky-top-table table {
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.sticky-top-table table thead tr {
|
|
position: sticky;
|
|
top: 0;
|
|
background-color: var(--header-bg-color);
|
|
color: var(--header-text-color);
|
|
font-weight: bold;
|
|
z-index: 10;
|
|
}
|
|
|
|
.dataframe {
|
|
font-family: var(--font-family);
|
|
font-size: var(--font-size);
|
|
}
|
|
|
|
.dataframe thead tr {
|
|
text-align: left;
|
|
}
|
|
|
|
.dataframe th,
|
|
.dataframe td {
|
|
padding: var(--cell-padding);
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.dataframe tbody tr:nth-of-type(even) {
|
|
background-color: var(--even-row-color);
|
|
}
|
|
|
|
.dataframe tbody tr:hover,
|
|
.table tbody tr:hover {
|
|
background-color: var(--row-hover-color);
|
|
}
|
|
|
|
/* Scrollbar styles */
|
|
.table-responsive {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
|
|
}
|
|
|
|
.table-responsive::-webkit-scrollbar {
|
|
width: var(--scrollbar-width);
|
|
height: var(--scrollbar-width);
|
|
}
|
|
|
|
.table-responsive::-webkit-scrollbar-thumb {
|
|
background-color: var(--scrollbar-thumb-color);
|
|
border-radius: calc(var(--scrollbar-width) / 2);
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
.table-responsive::-webkit-scrollbar-thumb:hover {
|
|
background-color: var(--scrollbar-thumb-hover-color);
|
|
}
|
|
|
|
.table-responsive::-webkit-scrollbar-track {
|
|
background: var(--scrollbar-track-color);
|
|
border-radius: calc(var(--scrollbar-width) / 2);
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 768px) {
|
|
.table-responsive {
|
|
font-size: calc(var(--font-size) * 0.9);
|
|
}
|
|
|
|
.dataframe th,
|
|
.dataframe td {
|
|
padding: 8px 10px;
|
|
}
|
|
}
|
|
|
|
/* Accessibility improvements */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.table-responsive::-webkit-scrollbar-thumb {
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
/* Print styles */
|
|
@media print {
|
|
.table-responsive {
|
|
overflow: visible;
|
|
max-height: none;
|
|
}
|
|
|
|
.sticky-top-table table thead tr {
|
|
position: static;
|
|
}
|
|
} |