@moontra/moonui-pro/src/components/rich-text-editor/table-styles.css

Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components

/* Table styles for RichTextEditor */
.ProseMirror table {
  border-collapse: collapse;
  margin: 0;
  overflow: hidden;
  table-layout: fixed;
  width: 100%;
  border: 1px solid #d1d5db;
}

.ProseMirror table td,
.ProseMirror table th {
  border: 1px solid #d1d5db;
  box-sizing: border-box;
  min-width: 1em;
  padding: 6px 8px;
  position: relative;
  vertical-align: top;
}

.ProseMirror table th {
  background-color: #f9fafb;
  font-weight: 600;
  text-align: left;
}

.ProseMirror table .selectedCell:after {
  background-color: rgba(59, 130, 246, 0.1);
  content: '';
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.ProseMirror table .column-resize-handle {
  background-color: #3b82f6;
  bottom: -2px;
  position: absolute;
  right: -2px;
  top: 0;
  width: 4px;
  pointer-events: none;
}

/* Dark mode styles */
.dark .ProseMirror table {
  border: 1px solid #374151;
}

.dark .ProseMirror table td,
.dark .ProseMirror table th {
  border: 1px solid #374151;
}

.dark .ProseMirror table th {
  background-color: #111827;
}

.dark .ProseMirror table .selectedCell:after {
  background-color: rgba(59, 130, 246, 0.2);
}