mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-21 20:55:50 +02:00
Code Issues Releases Wiki Activity

tables.md: make vertical table responsive (#30191)

Browse Source 
Fixes page overflow on mobile.

Co-authored-by: Martijn Cuppens <martijn.cuppens@gmail.com>
This commit is contained in:
XhmikosR
2020-02-16 17:55:19 +02:00
committed by GitHub
parent 1dcd4967cc
commit 90375b5433
1 changed files with 32 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
site/content/docs/4.3/content/tables.md
View File

@@ -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. 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 >}} {{< example >}}
<table class="table align-middle"> <div class="table-responsive">
<thead> <table class="table align-middle">
<tr> <thead>
<th scope="col" class="w-25">Heading 1</th> <tr>
<th scope="col" class="w-25">Heading 2</th> <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> <th scope="col" class="w-25">Heading 2</th>
</tr> <th scope="col" class="w-25">Heading 4</th>
</thead> </tr>
<tbody> </thead>
<tr> <tbody>
<td>This cell inherits <code>vertical-align: middle;</code> from the table</td> <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>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> <td>This cell inherits <code>vertical-align: middle;</code> from the table</td>
</tr> <td>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.</td>
<tr class="align-bottom"> </tr>
<td>This cell inherits <code>vertical-align: bottom;</code> from the table row</td> <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>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> <td>This cell inherits <code>vertical-align: bottom;</code> from the table row</td>
</tr> <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> <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>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> <td class="align-top">This cell is aligned to the top.</td>
</tr> <td>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.</td>
</tbody> </tr>
</table> </tbody>
</table>
</div>
{{< /example >}} {{< /example >}}
### Variants ### Variants