/* 容器样式 */ .table-container { width: 100%; /* max-width: 2000px; */ margin: 20px auto; overflow-x: auto; } /* 基础表格样式 */ .responsive-table { width: 100%; border-collapse: collapse; background: white; box-shadow: 0 1px 10px rgba(0,0,0,0.1); font-family: 'Segoe UI', sans-serif; } /* 表头样式 */ .responsive-table th { background: #f8f9fa; padding: 12px 5px; text-align: left; font-weight: 600; border-bottom: 2px solid #dee2e6; color: #495057; } /* 数据单元格样式 */ .responsive-table td { padding: 12px 5px; border-bottom: 1px solid #dee2e6; color: #6c757d; } /* 斑马纹效果 */ .responsive-table tr:nth-child(even) { background-color: #f8f9fa; } /* 响应式处理 */ @media (max-width: 768px) { .table-container { width: 95%; margin: 10px auto; } .responsive-table { min-width: 600px; } } /* 悬停效果 */ .responsive-table tr:hover { background-color: #e9ecef; transition: background-color 0.2s ease; }