mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-24 22:16:38 +02:00
Code Issues Releases Wiki Activity

Add .caption-top for tables (#30435)

Browse Source 
* Move caption-side to <table> element in Reboot

* Add class for .caption-top
This commit is contained in:
Mark Otto
2020-03-24 02:00:45 -07:00
committed by GitHub
parent 64a5987cc0
commit 4ccd522a76
3 changed files with 44 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -683,6 +683,42 @@ A `<caption>` functions like a heading for a table. It helps users with screen r
</table>
{{< /example >}}
You can also put the `<caption>` on the top of the table with `.caption-top`.
{{< example >}}
<table class="table caption-top">
<caption>List of users</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
{{< /example >}}
## Responsive tables
Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a `.table` with `.table-responsive`. Or, pick a maximum breakpoint with which to have a responsive table up to by using `.table-responsive{-sm|-md|-lg|-xl}`.