diff --git a/src/stories/Library/rich-text/RichText.tsx b/src/stories/Library/rich-text/RichText.tsx index dce43b40d..08efdc04f 100644 --- a/src/stories/Library/rich-text/RichText.tsx +++ b/src/stories/Library/rich-text/RichText.tsx @@ -45,6 +45,26 @@ export const RichText = () => {
  • Bagginses?
  • +
    + + + + + + + + + + + + + + + + + +
    Entry Header 1Entry Header 2
    Entry First Line 1Entry First Line 2
    Entry Line 1Entry Line 2
    +
    ); }; diff --git a/src/stories/Library/rich-text/rich-text.scss b/src/stories/Library/rich-text/rich-text.scss index 0a961032d..317414869 100644 --- a/src/stories/Library/rich-text/rich-text.scss +++ b/src/stories/Library/rich-text/rich-text.scss @@ -3,8 +3,6 @@ // we will target HTML tags instead. .rich-text { @include typography($typo__rich-text-body); - - // Setting a max-width to increase readability for sentences. @include layout-container($layout__max-width--text); a { @@ -31,6 +29,7 @@ position: relative; padding-left: $_dash-width + $s-md; padding-bottom: $s-lg; + box-sizing: border-box; &::before { position: absolute; @@ -74,4 +73,44 @@ content: counter(list) "."; } } + + table { + width: 100%; + + // CKEditor also *can* set inline widths and heights. + // We want to disable this. + &[style] { + min-width: 100% !important; + height: auto !important; + } + } + + table, + th, + td { + border-collapse: collapse; + border: 0; + padding: $s-xs $s-sm; + box-sizing: border-box; + } + + thead { + background-color: $color__global-tertiary-2; + color: $color__text-primary-white; + } + + tbody { + tr { + background-color: $color__global-primary; + } + + tr:nth-child(2n) { + background-color: $color__global-secondary; + } + } + + th { + text-align: left; + font-weight: bold; + } }