table.css 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. /*
  2. * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. .ck-content .table {
  6. /* Give the table widget some air and center it horizontally */
  7. margin: 1em auto;
  8. display: table;
  9. & table {
  10. /* The table cells should have slight borders */
  11. border-collapse: collapse;
  12. border-spacing: 0;
  13. /* Table width and height are set on the parent <figure>. Make sure the table inside stretches
  14. to the full dimensions of the container (https://github.com/ckeditor/ckeditor5/issues/6186). */
  15. width: 100%;
  16. height: 100%;
  17. /* The outer border of the table should be slightly darker than the inner lines.
  18. Also see https://github.com/ckeditor/ckeditor5-table/issues/50. */
  19. border: 1px double hsl(0, 0%, 70%);
  20. & td,
  21. & th {
  22. min-width: 2em;
  23. padding: .4em;
  24. /* The border is inherited from .ck-editor__nested-editable styles, so theoretically it's not necessary here.
  25. However, the border is a content style, so it should use .ck-content (so it works outside the editor).
  26. Hence, the duplication. See https://github.com/ckeditor/ckeditor5/issues/6314 */
  27. border: 1px solid hsl(0, 0%, 75%);
  28. }
  29. & th {
  30. font-weight: bold;
  31. background: hsla(0, 0%, 0%, 5%);
  32. }
  33. }
  34. }
  35. /* Text alignment of the table header should match the editor settings and override the native browser styling,
  36. when content is available outside the ediitor. See https://github.com/ckeditor/ckeditor5/issues/6638 */
  37. .ck-content[dir="rtl"] .table th {
  38. text-align: right;
  39. }
  40. .ck-content[dir="ltr"] .table th {
  41. text-align: left;
  42. }