diff options
| author | XhmikosR <[email protected]> | 2020-02-16 17:55:19 +0200 |
|---|---|---|
| committer | GitHub <[email protected]> | 2020-02-16 16:55:19 +0100 |
| commit | 90375b54332afe815f7169cbf042c59a8fb20e16 (patch) | |
| tree | 69a2b502e95e54a2b0092458ef3c886dfc333e6d | |
| parent | 1dcd4967cc083748af332897e3371f67f6693056 (diff) | |
| download | bootstrap-90375b54332afe815f7169cbf042c59a8fb20e16.tar.xz bootstrap-90375b54332afe815f7169cbf042c59a8fb20e16.zip | |
tables.md: make vertical table responsive (#30191)
Fixes page overflow on mobile.
Co-authored-by: Martijn Cuppens <[email protected]>
| -rw-r--r-- | site/content/docs/4.3/content/tables.md | 62 |
1 files 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 cbbe8d690..12aac11c9 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 |