rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases 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
commit aa5ef212f3
1 changed files with 98 additions and 7 deletions
Show Stats 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
---
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
* Will be replaced with the ToC, excluding the "Contents" header
{:toc}
## Basic example
## Examples
Using the most basic table markup, here's how `.table`-based tables look in Bootstrap.
{% example html %}
<table class="table">
@ -46,7 +48,7 @@ Due to the widespread use of tables across third-party widgets like calendars an
</table>
{% endexample %}
## Inverse table
You can also invert the colors—with light text on dark backgrounds—with `.table-inverse`.
{% example html %}
<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
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 %}
<table class="table">
@ -420,9 +422,6 @@ Use contextual classes to color table rows or individual cells.
</table>
</div>
{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
{{ callout-include | markdownify }}
{% highlight html %}
<!-- On rows -->
<tr class="table-active">...</tr>
@ -441,6 +440,98 @@ Use contextual classes to color table rows or individual cells.
</tr>
{% 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
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.