diff --git a/docs/components/TableContainer.vue b/docs/components/TableContainer.vue
index addbc6bcd..0cda7c98c 100644
--- a/docs/components/TableContainer.vue
+++ b/docs/components/TableContainer.vue
@@ -1,3 +1,3 @@
 <template>
-  <div class="max-w-full overflow-x-auto"><slot /></div>
+  <div class="max-w-full my-4 overflow-x-auto"><slot /></div>
 </template>
diff --git a/docs/content/2.usage/3.components.md b/docs/content/2.usage/3.components.md
index d5db296c5..5c1d23751 100644
--- a/docs/content/2.usage/3.components.md
+++ b/docs/content/2.usage/3.components.md
@@ -63,10 +63,14 @@ Check out a **danger** alert with a `codeblock` and a [link](/).
 </code-block>
 </code-group>
 
+<table-container>
+
 | Prop | Type | Default | Values |
 |---------|------|-------------| ---|
 | `type` | `String` | `'info'` | `['info', 'success', 'warning', 'danger']` |
 
+</table-container>
+
 ### `<list>`
 
 <code-group>