优化修复

static/css/style.css

@@ -569,6 +569,71 @@ header p {
     -webkit-overflow-scrolling: touch; /* iOS平滑滚动 */
 }
 
+/* 列宽调节样式 */
+.resizable-table {
+    width: 100%;
+    table-layout: auto;
+    border-collapse: collapse;
+    overflow: hidden;
+}
+
+.resizable-table th {
+    position: relative;
+    padding: 0.75rem 1rem;
+    background-color: #f8f9fa;
+    font-weight: 600;
+    color: #2c3e50;
+    border-bottom: 1px solid #e9ecef;
+    cursor: pointer;
+    user-select: none;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    min-width: 50px;
+}
+
+.resizable-table th::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 10px;
+    height: 100%;
+    cursor: col-resize;
+    background: transparent;
+    z-index: 10;
+    margin-right: -10px;
+}
+
+.resizable-table th:hover::after {
+    background: rgba(59, 130, 246, 0.3);
+}
+
+.resizable-table th.dragging {
+    cursor: col-resize;
+}
+
+.resizable-table th.dragging::after {
+    background: rgba(59, 130, 246, 0.6);
+}
+
+.resizable-table td {
+    padding: 0.75rem 1rem;
+    text-align: left;
+    border-bottom: 1px solid #e9ecef;
+    word-break: break-word;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 50px;
+}
+
+/* 确保表格容器正确显示 */
+.overflow-x-auto {
+    overflow-x: auto;
+    position: relative;
+}
+
 /* 最常屏蔽和最常解析域名表格的特殊样式 */
 #top-blocked-table, #top-resolved-table {
     font-size: 0.85rem;
@@ -1154,4 +1219,75 @@ tr:hover {
 
 .tracker-tooltip a:hover {
     text-decoration: underline;
+}
+
+/* 滚动条样式优化 */
+/* 基础滚动条样式 */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+/* 滚动条轨道 */
+::-webkit-scrollbar-track {
+    background: rgba(241, 245, 249, 0.5);
+    border-radius: 4px;
+}
+
+/* 滚动条滑块 */
+::-webkit-scrollbar-thumb {
+    background: rgba(148, 163, 184, 0.6);
+    border-radius: 4px;
+    transition: all 0.3s ease;
+}
+
+/* 滚动条滑块悬停效果 */
+::-webkit-scrollbar-thumb:hover {
+    background: rgba(100, 116, 139, 0.8);
+}
+
+/* 滚动条角落 */
+::-webkit-scrollbar-corner {
+    background: rgba(241, 245, 249, 0.5);
+    border-radius: 4px;
+}
+
+/* 为不同滚动容器添加特定样式 */
+.sidebar::-webkit-scrollbar-thumb {
+    background: rgba(148, 163, 184, 0.4);
+}
+
+.sidebar::-webkit-scrollbar-thumb:hover {
+    background: rgba(148, 163, 184, 0.7);
+}
+
+/* 优化表格和卡片中的滚动条 */
+.table-wrapper::-webkit-scrollbar,
+.chart-card::-webkit-scrollbar,
+.stat-card::-webkit-scrollbar,
+#top-blocked-table::-webkit-scrollbar,
+#top-resolved-table::-webkit-scrollbar,
+#top-clients-table::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+.table-wrapper::-webkit-scrollbar-thumb,
+.chart-card::-webkit-scrollbar-thumb,
+.stat-card::-webkit-scrollbar-thumb,
+#top-blocked-table::-webkit-scrollbar-thumb,
+#top-resolved-table::-webkit-scrollbar-thumb,
+#top-clients-table::-webkit-scrollbar-thumb {
+    background: rgba(148, 163, 184, 0.5);
+}
+
+/* Firefox滚动条样式 */
+* {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(148, 163, 184, 0.6) rgba(241, 245, 249, 0.5);
+}
+
+/* 优化滚动行为 */
+* {
+    scroll-behavior: smooth;
 }