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 1 |
+ Entry Header 2 |
+
+
+
+
+ Entry First Line 1 |
+ Entry First Line 2 |
+
+
+ Entry Line 1 |
+ Entry 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;
+ }
}