TableBlock.css 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. /**
  2. * TableBlock.css - 表格块样式
  3. */
  4. .table-block-wrapper {
  5. margin-bottom: 16px;
  6. position: relative;
  7. overflow: visible;
  8. }
  9. .table-container {
  10. overflow: visible; /* 改为visible以显示拖拽线 */
  11. margin: 8px 0;
  12. position: relative; /* 为虚拟拖拽线提供定位上下文 */
  13. }
  14. .table-block {
  15. border-collapse: collapse;
  16. width: 100%;
  17. max-width: 100%;
  18. background-color: #ffffff;
  19. transition: none; /* 拖拽时禁用过渡 */
  20. }
  21. /* 拖拽中的表格状态 */
  22. .table-block.table-resizing {
  23. user-select: none;
  24. }
  25. .table-block.table-selecting,
  26. .table-block.table-selecting * {
  27. user-select: none;
  28. }
  29. .table-block th,
  30. .table-block td {
  31. border: 1px solid #d9d9d9;
  32. padding: 8px 12px;
  33. text-align: left;
  34. }
  35. .table-block th {
  36. background-color: #fafafa;
  37. font-weight: 600;
  38. }
  39. /* 尺寸提示 Tooltip */
  40. .resize-tooltip {
  41. position: fixed;
  42. background: rgba(0, 0, 0, 0.75);
  43. color: white;
  44. padding: 4px 8px;
  45. border-radius: 4px;
  46. font-size: 12px;
  47. pointer-events: none;
  48. z-index: 1001;
  49. white-space: nowrap;
  50. box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  51. }
  52. /* 性能优化 - 使用will-change */
  53. .table-block.table-resizing,
  54. .table-block.table-resizing * {
  55. will-change: width, height;
  56. }