mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-17 11:00:56 +02:00
Code Issues Releases Wiki Activity

Merge pull request #19863 from twbs/v4-inverse-table-variants

Browse Source 
v4: Inverse table variants
This commit is contained in:
Mark Otto
2016-05-08 14:33:38 -07:00
parent 399fdb8ebe 7322c8dc75
commit aa5ef212f3
1 changed files with 98 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
docs/content/tables.md
View File

@@ -4,14 +4,16 @@ title: Tables
group: content group: content
--- ---
Due to the widespread use of tables across third-party widgets like calendars and date pickers, we've designed our tables to be **opt-in**. Just add the base class `.table` to any `<table>`. Due to the widespread use of tables across third-party widgets like calendars and date pickers, we've designed our tables to be **opt-in**. Just add the base class `.table` to any `<table>`, then extend with custom styles or our various included modifier classes.
## Contents ## Contents
* Will be replaced with the ToC, excluding the "Contents" header * Will be replaced with the ToC, excluding the "Contents" header
{:toc} {:toc}
## Basic example ## Examples
Using the most basic table markup, here's how `.table`-based tables look in Bootstrap.
{% example html %} {% example html %}
<table class="table"> <table class="table">
@@ -46,7 +48,7 @@ Due to the widespread use of tables across third-party widgets like calendars an
</table> </table>
{% endexample %} {% endexample %}
## Inverse table You can also invert the colors—with light text on dark backgrounds—with `.table-inverse`.
{% example html %} {% example html %}
<table class="table table-inverse"> <table class="table table-inverse">
@@ -83,7 +85,7 @@ Due to the widespread use of tables across third-party widgets like calendars an
## Table head options ## Table head options
Use one of two modifier classes to make `<thead>`s appear light or dark gray. Similar to default and inverse tables, use one of two modifier classes to make `<thead>`s appear light or dark gray.
{% example html %} {% example html %}
<table class="table"> <table class="table">
@@ -420,9 +422,6 @@ Use contextual classes to color table rows or individual cells.
</table> </table>
</div> </div>
{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
{{ callout-include | markdownify }}
{% highlight html %} {% highlight html %}
<!-- On rows --> <!-- On rows -->
<tr class="table-active">...</tr> <tr class="table-active">...</tr>
@@ -441,6 +440,98 @@ Use contextual classes to color table rows or individual cells.
</tr> </tr>
{% endhighlight %} {% endhighlight %}
Regular table background variants are not available with the inverse table, however, you may use [text or background utilities](/components/utilities/#contextual-colors-and-backgrounds) to achieve similar styles.
<div class="bd-example">
<table class="table table-inverse">
<thead>
<tr>
<th>#</th>
<th>Column heading</th>
<th>Column heading</th>
<th>Column heading</th>
</tr>
</thead>
<tbody>
<tr class="bg-primary">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="bg-success">
<th scope="row">3</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="bg-info">
<th scope="row">5</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="bg-warning">
<th scope="row">7</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<th scope="row">8</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="bg-danger">
<th scope="row">9</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
</tbody>
</table>
</div>
{% highlight html %}
<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="bg-primary">...</td>
<td class="bg-success">...</td>
<td class="bg-warning">...</td>
<td class="bg-danger">...</td>
<td class="bg-info">...</td>
</tr>
{% endhighlight %}
{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
{{ callout-include | markdownify }}
## Responsive tables ## Responsive tables
Create responsive tables by wrapping any `.table` in `.table-responsive` to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables. Create responsive tables by wrapping any `.table` in `.table-responsive` to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.