diff --git a/lib/components/SContent.vue b/lib/components/SContent.vue index 7737e9da..5459bf32 100644 --- a/lib/components/SContent.vue +++ b/lib/components/SContent.vue @@ -110,4 +110,38 @@ font-feature-settings: "tnum"; content: counter(s-medium-counter)". "; } + +.SContent :deep(table) { + box-shadow: 0 0 0 1px var(--c-divider); + table-layout: fixed; + overflow: clip; + width: 100%; + margin: 4px 0; + border-style: hidden; + border-radius: 6px; + font-size: 14px; + color: var(--c-text-1); + text-align: left; +} + +.SContent :deep(table th), +.SContent :deep(table td) { + overflow-wrap: break-word; + height: 40px; + padding: 8px 16px; + background-color: var(--c-bg-elv-3); + border: 1px solid var(--c-gutter); + text-wrap: pretty; +} + +.SContent :deep(table th) { + font-size: 12px; + font-weight: 600; + color: var(--c-text-2); + text-wrap: balance; +} + +.SContent :deep(table tr:hover td) { + background-color: var(--c-bg-elv-4); +} diff --git a/stories/components/SContent.01_Playground.story.vue b/stories/components/SContent.01_Playground.story.vue index 2ec44f28..65a8eb8f 100644 --- a/stories/components/SContent.01_Playground.story.vue +++ b/stories/components/SContent.01_Playground.story.vue @@ -41,6 +41,33 @@ const docs = '/components/content'
  • Sed ut perspiciatis unde omnis iste natus error.
  • Lorem ipsum dolor sit amet.
  • + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Header 1Header 2Header 3
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.