1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556 |
- /* 容器样式 */
- .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;
- }
|