empHireBizBillHrManEditEx.css 1.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. /* 容器样式 */
  2. .table-container {
  3. width: 100%;
  4. /* max-width: 2000px; */
  5. margin: 20px auto;
  6. overflow-x: auto;
  7. }
  8. /* 基础表格样式 */
  9. .responsive-table {
  10. width: 100%;
  11. border-collapse: collapse;
  12. background: white;
  13. box-shadow: 0 1px 10px rgba(0,0,0,0.1);
  14. font-family: 'Segoe UI', sans-serif;
  15. }
  16. /* 表头样式 */
  17. .responsive-table th {
  18. background: #f8f9fa;
  19. padding: 12px 5px;
  20. text-align: left;
  21. font-weight: 600;
  22. border-bottom: 2px solid #dee2e6;
  23. color: #495057;
  24. }
  25. /* 数据单元格样式 */
  26. .responsive-table td {
  27. padding: 12px 5px;
  28. border-bottom: 1px solid #dee2e6;
  29. color: #6c757d;
  30. }
  31. /* 斑马纹效果 */
  32. .responsive-table tr:nth-child(even) {
  33. background-color: #f8f9fa;
  34. }
  35. /* 响应式处理 */
  36. @media (max-width: 768px) {
  37. .table-container {
  38. width: 95%;
  39. margin: 10px auto;
  40. }
  41. .responsive-table {
  42. min-width: 600px;
  43. }
  44. }
  45. /* 悬停效果 */
  46. .responsive-table tr:hover {
  47. background-color: #e9ecef;
  48. transition: background-color 0.2s ease;
  49. }