kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

Make it possible to change default alignment & allow to inherit alignment from table (#29039)

This commit is contained in:
Martijn Cuppens 2019-07-18 07:49:39 +02:00 committed by XhmikosR
parent 99676c7809
commit 62b8e84970
3 changed files with 44 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
scss/_tables.scss
View File

@ -6,15 +6,19 @@
width: 100%;
margin-bottom: $spacer;
color: $table-color;
vertical-align: $table-cell-vertical-align;
background-color: $table-bg; // Reset for nesting within parents with `background-color`.
th,
td {
padding: $table-cell-padding;
vertical-align: top;
border-bottom: $table-border-width solid $table-border-color;
}
tbody {
vertical-align: inherit;
}
td {
border-bottom: $table-border-width solid $table-border-color;
}

2
scss/_variables.scss
View File

@ -355,6 +355,8 @@ $hr-margin-y: $spacer !default;
$table-cell-padding: .5rem !default;
$table-cell-padding-sm: .25rem !default;
$table-cell-vertical-align: top !default;
$table-color: $body-color !default;
$table-bg: null !default;
$table-accent-bg: rgba($black, .05) !default;

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

@ -396,6 +396,43 @@ Add `.table-sm` to make any `.table` more compact by cutting all cell `padding`
</table>
{{< /example >}}
## Vertical alignment
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>
{{< /example >}}
### Variants
Use contextual classes to color table rows or individual cells.