kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases 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
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 44 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
scss/_reboot.scss
View file

@ -355,6 +355,7 @@ svg {
// Prevent double borders // Prevent double borders
table { table {
caption-side: bottom;
border-collapse: collapse; border-collapse: collapse;
} }
@ -363,7 +364,6 @@ caption {
padding-bottom: $table-cell-padding; padding-bottom: $table-cell-padding;
color: $table-caption-color; color: $table-caption-color;
text-align: left; text-align: left;
caption-side: bottom;
} }
// 1. Matches default `<td>` alignment by inheriting `text-align`. // 1. Matches default `<td>` alignment by inheriting `text-align`.

7
scss/_tables.scss
View file

@ -30,6 +30,13 @@
} }
//
// Change placement of captions with a class
//
.caption-top { caption-side: top; }
// //
// Condensed table w/ half padding // Condensed table w/ half padding
// //

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> </table>
{{< /example >}} {{< /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
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}`. 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}`.