docs: update layout

Author: mrholek

packages/docs/.vuepress/config.ts

@@ -44,6 +44,19 @@ export default defineUserConfig<DefaultThemeOptions>({
         },
       },
     ],
+    [
+      '@vuepress/container',
+      {
+        type: 'demo-rounded',
+        render: function (tokens, idx) {
+          if (tokens[idx].nesting === 1) {
+            return '<div class="docs-example border rounded p-4">\n'
+          } else {
+            return '</div>\n'
+          }
+        },
+      },
+    ],
     [
       '@vuepress/container',
       {

packages/docs/components/table.md

@@ -11,7 +11,7 @@ Due to the widespread use of `<CTable>` elements across third-party widgets like
 
 Using the most basic table CoreUI, here's how `<CTable>`-based tables look in CoreUI.
 
-::: demo
+::: demo-rounded
 <CTable :columns="columns" :items="items" />
 :::
 
@@ -694,7 +694,7 @@ These hoverable rows can also be combined with the striped variant:
 
 Highlight a table row or cell by adding a `active` property.
 
-::: demo
+::: demo-rounded
 <CTable :columns="columnsActiveTableExample" :items="itemsActiveTableExample" />
 :::