From 90375b54332afe815f7169cbf042c59a8fb20e16 Mon Sep 17 00:00:00 2001
From: XhmikosR <xhmikosr@gmail.com>
Date: Sun, 16 Feb 2020 17:55:19 +0200
Subject: [PATCH] tables.md: make vertical table responsive (#30191)

Fixes page overflow on mobile.

Co-authored-by: Martijn Cuppens <martijn.cuppens@gmail.com>
---
 site/content/docs/4.3/content/tables.md | 62 +++++++++++++------------
 1 file changed, 32 insertions(+), 30 deletions(-)

diff --git a/site/content/docs/4.3/content/tables.md b/site/content/docs/4.3/content/tables.md
index cbbe8d6902..12aac11c93 100644
--- a/site/content/docs/4.3/content/tables.md
+++ b/site/content/docs/4.3/content/tables.md
@@ -401,36 +401,38 @@ Add `.table-sm` to make any `.table` more compact by cutting all cell `padding`
 Table cells of `<thead>` are always vertical aligned to the bottom. Table cells in `<tbody>` inherit their alignment from `<table>` and are aligned to the the top by default.
 
 {{< example >}}
-<table class="table align-middle">
-  <thead>
-    <tr>
-      <th scope="col" class="w-25">Heading 1</th>
-      <th scope="col" class="w-25">Heading 2</th>
-      <th scope="col" class="w-25">Heading 2</th>
-      <th scope="col" class="w-25">Heading 4</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>This cell inherits <code>vertical-align: middle;</code> from the table</td>
-      <td>This cell inherits <code>vertical-align: middle;</code> from the table</td>
-      <td>This cell inherits <code>vertical-align: middle;</code> from the table</td>
-      <td>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.</td>
-    </tr>
-    <tr class="align-bottom">
-      <td>This cell inherits <code>vertical-align: bottom;</code> from the table row</td>
-      <td>This cell inherits <code>vertical-align: bottom;</code> from the table row</td>
-      <td>This cell inherits <code>vertical-align: bottom;</code> from the table row</td>
-      <td>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.</td>
-    </tr>
-    <tr>
-      <td>This cell inherits <code>vertical-align: middle;</code> from the table</td>
-      <td>This cell inherits <code>vertical-align: middle;</code> from the table</td>
-      <td class="align-top">This cell is aligned to the top.</td>
-      <td>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.</td>
-    </tr>
-  </tbody>
-</table>
+<div class="table-responsive">
+  <table class="table align-middle">
+    <thead>
+      <tr>
+        <th scope="col" class="w-25">Heading 1</th>
+        <th scope="col" class="w-25">Heading 2</th>
+        <th scope="col" class="w-25">Heading 2</th>
+        <th scope="col" class="w-25">Heading 4</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>This cell inherits <code>vertical-align: middle;</code> from the table</td>
+        <td>This cell inherits <code>vertical-align: middle;</code> from the table</td>
+        <td>This cell inherits <code>vertical-align: middle;</code> from the table</td>
+        <td>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.</td>
+      </tr>
+      <tr class="align-bottom">
+        <td>This cell inherits <code>vertical-align: bottom;</code> from the table row</td>
+        <td>This cell inherits <code>vertical-align: bottom;</code> from the table row</td>
+        <td>This cell inherits <code>vertical-align: bottom;</code> from the table row</td>
+        <td>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.</td>
+      </tr>
+      <tr>
+        <td>This cell inherits <code>vertical-align: middle;</code> from the table</td>
+        <td>This cell inherits <code>vertical-align: middle;</code> from the table</td>
+        <td class="align-top">This cell is aligned to the top.</td>
+        <td>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
 {{< /example >}}
 
 ### Variants