forked from varia/varia.website
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
293 lines
7.2 KiB
293 lines
7.2 KiB
7 years ago
|
Tables
|
||
|
|
======
|
||
|
|
|
||
|
|
Basic example
|
||
|
|
-------------
|
||
|
|
|
||
|
|
For basic styling—light padding and only horizontal dividers—add the base class
|
||
|
|
.table to any `<table>`. It may seem super redundant, but given the widespread
|
||
|
|
use of tables for other plugins like calendars and date pickers, we've opted to
|
||
|
|
isolate our custom table styles.
|
||
|
|
|
||
|
|
.. container:: bs-example
|
||
|
|
|
||
|
|
= ========== ========= ========
|
||
|
|
# First Name Last Name Username
|
||
|
|
= ========== ========= ========
|
||
|
|
1 Mark Otto @mdo
|
||
|
|
2 Jacob Thornton @fat
|
||
|
|
3 Larry the Bird @twitter
|
||
|
|
= ========== ========= ========
|
||
|
|
|
||
|
|
.. code::
|
||
|
|
:class: highlight
|
||
|
|
|
||
|
|
= ========== ========= ========
|
||
|
|
# First Name Last Name Username
|
||
|
|
= ========== ========= ========
|
||
|
|
1 Mark Otto @mdo
|
||
|
|
2 Jacob Thornton @fat
|
||
|
|
3 Larry the Bird @twitter
|
||
|
|
= ========== ========= ========
|
||
|
|
|
||
|
|
|
||
|
|
Striped rows
|
||
|
|
------------
|
||
|
|
|
||
|
|
Use `table-striped` to add zebra-striping to any table row within the `<tbody>`.
|
||
|
|
|
||
|
|
.. ----------------------------------------------------------------------------
|
||
|
|
.. callout:: danger
|
||
|
|
|
||
|
|
:h4:`Cross-browser compatibility`
|
||
|
|
Striped tables are styled via the `:nth-child` CSS selector, which is not
|
||
|
|
available in Internet Explorer 8.
|
||
|
|
.. ----------------------------------------------------------------------------
|
||
|
|
|
||
|
|
|
||
|
|
.. container:: bs-example
|
||
|
|
|
||
|
|
.. class:: table-striped
|
||
|
|
|
||
|
|
= ========== ========= ========
|
||
|
|
# First Name Last Name Username
|
||
|
|
= ========== ========= ========
|
||
|
|
1 Mark Otto @mdo
|
||
|
|
2 Jacob Thornton @fat
|
||
|
|
3 Larry the Bird @twitter
|
||
|
|
= ========== ========= ========
|
||
|
|
|
||
|
|
.. code::
|
||
|
|
:class: highlight
|
||
|
|
|
||
|
|
.. class:: table-striped
|
||
|
|
|
||
|
|
= ========== ========= ========
|
||
|
|
# First Name Last Name Username
|
||
|
|
= ========== ========= ========
|
||
|
|
1 Mark Otto @mdo
|
||
|
|
2 Jacob Thornton @fat
|
||
|
|
3 Larry the Bird @twitter
|
||
|
|
= ========== ========= ========
|
||
|
|
|
||
|
|
Bordered table
|
||
|
|
--------------
|
||
|
|
|
||
|
|
Add `table-bordered` for borders on all sides of the table and cells.
|
||
|
|
|
||
|
|
.. container:: bs-example
|
||
|
|
|
||
|
|
.. class:: table-bordered table-striped
|
||
|
|
|
||
|
|
= ========== ========= ========
|
||
|
|
# First Name Last Name Username
|
||
|
|
= ========== ========= ========
|
||
|
|
1 Mark Otto @mdo
|
||
|
|
2 Jacob Thornton @fat
|
||
|
|
3 Larry the Bird @twitter
|
||
|
|
= ========== ========= ========
|
||
|
|
|
||
|
|
.. code::
|
||
|
|
:class: highlight
|
||
|
|
|
||
|
|
.. class:: table-bordered table-striped
|
||
|
|
|
||
|
|
= ========== ========= ========
|
||
|
|
# First Name Last Name Username
|
||
|
|
= ========== ========= ========
|
||
|
|
1 Mark Otto @mdo
|
||
|
|
2 Jacob Thornton @fat
|
||
|
|
3 Larry the Bird @twitter
|
||
|
|
= ========== ========= ========
|
||
|
|
|
||
|
|
Hover rows
|
||
|
|
----------
|
||
|
|
|
||
|
|
Add `table-hover` to enable a hover state on table rows within a `<tbody>`.
|
||
|
|
|
||
|
|
.. container:: bs-example
|
||
|
|
|
||
|
|
.. class:: table-hover
|
||
|
|
|
||
|
|
= ========== ========= ========
|
||
|
|
# First Name Last Name Username
|
||
|
|
= ========== ========= ========
|
||
|
|
1 Mark Otto @mdo
|
||
|
|
2 Jacob Thornton @fat
|
||
|
|
3 Larry the Bird @twitter
|
||
|
|
= ========== ========= ========
|
||
|
|
|
||
|
|
.. code::
|
||
|
|
:class: highlight
|
||
|
|
|
||
|
|
.. class:: table-hover
|
||
|
|
|
||
|
|
= ========== ========= ========
|
||
|
|
# First Name Last Name Username
|
||
|
|
= ========== ========= ========
|
||
|
|
1 Mark Otto @mdo
|
||
|
|
2 Jacob Thornton @fat
|
||
|
|
3 Larry the Bird @twitter
|
||
|
|
= ========== ========= ========
|
||
|
|
|
||
|
|
|
||
|
|
Condensed table
|
||
|
|
---------------
|
||
|
|
|
||
|
|
Add `table-condensed` to make tables more compact by cutting cell padding in half.
|
||
|
|
|
||
|
|
.. container:: bs-example
|
||
|
|
|
||
|
|
.. class:: table-condensed
|
||
|
|
|
||
|
|
= ========== ========= ========
|
||
|
|
# First Name Last Name Username
|
||
|
|
= ========== ========= ========
|
||
|
|
1 Mark Otto @mdo
|
||
|
|
2 Jacob Thornton @fat
|
||
|
|
3 Larry the Bird @twitter
|
||
|
|
= ========== ========= ========
|
||
|
|
|
||
|
|
.. code::
|
||
|
|
:class: highlight
|
||
|
|
|
||
|
|
.. class:: table-condensed
|
||
|
|
|
||
|
|
= ========== ========= ========
|
||
|
|
# First Name Last Name Username
|
||
|
|
= ========== ========= ========
|
||
|
|
1 Mark Otto @mdo
|
||
|
|
2 Jacob Thornton @fat
|
||
|
|
3 Larry the Bird @twitter
|
||
|
|
= ========== ========= ========
|
||
|
|
|
||
|
|
Contextual classes
|
||
|
|
------------------
|
||
|
|
|
||
|
|
Use contextual classes to color table rows or individual cells.
|
||
|
|
|
||
|
|
.. container:: bs-example
|
||
|
|
|
||
|
|
.. list-table::
|
||
|
|
:widths: 10 30 30 30
|
||
|
|
|
||
|
|
* - #
|
||
|
|
- Column heading
|
||
|
|
- Column heading
|
||
|
|
- Column heading
|
||
|
|
|
||
|
|
* .. class:: active
|
||
|
|
|
||
|
|
- 1
|
||
|
|
- Column content
|
||
|
|
- Column content
|
||
|
|
- Column content
|
||
|
|
|
||
|
|
* - 2
|
||
|
|
- Column heading
|
||
|
|
- Column heading
|
||
|
|
- Column heading
|
||
|
|
|
||
|
|
* .. class:: success
|
||
|
|
|
||
|
|
- 3
|
||
|
|
- Column content
|
||
|
|
- Column content
|
||
|
|
- Column content
|
||
|
|
|
||
|
|
* - 4
|
||
|
|
- Column heading
|
||
|
|
- Column heading
|
||
|
|
- Column heading
|
||
|
|
|
||
|
|
* .. class:: warning
|
||
|
|
|
||
|
|
- 5
|
||
|
|
- Column content
|
||
|
|
- Column content
|
||
|
|
- Column content
|
||
|
|
|
||
|
|
* - 6
|
||
|
|
- Column heading
|
||
|
|
- Column heading
|
||
|
|
- Column heading
|
||
|
|
|
||
|
|
|
||
|
|
* .. class:: danger
|
||
|
|
|
||
|
|
- 7
|
||
|
|
- Column content
|
||
|
|
- Column content
|
||
|
|
- Column content
|
||
|
|
|
||
|
|
* - 8
|
||
|
|
- Column heading
|
||
|
|
- Column heading
|
||
|
|
- Column heading
|
||
|
|
|
||
|
|
|
||
|
|
* .. class:: info
|
||
|
|
|
||
|
|
- 9
|
||
|
|
- Column content
|
||
|
|
- Column content
|
||
|
|
- Column content
|
||
|
|
|
||
|
|
.. code::
|
||
|
|
:class: highlight
|
||
|
|
|
||
|
|
.. list-table::
|
||
|
|
:widths: 10 30 30 30
|
||
|
|
|
||
|
|
* - #
|
||
|
|
- Column heading
|
||
|
|
- Column heading
|
||
|
|
- Column heading
|
||
|
|
|
||
|
|
* .. class:: active
|
||
|
|
|
||
|
|
- 1
|
||
|
|
- Column content
|
||
|
|
- Column content
|
||
|
|
- Column content
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
Responsive tables
|
||
|
|
-----------------
|
||
|
|
|
||
|
|
Create responsive tables by wrapping any `.table` in `.table-responsive` to
|
||
|
|
make them scroll horizontally up to small devices (under 768px). When viewing
|
||
|
|
on anything larger than 768px wide, you will not see any difference in these
|
||
|
|
tables.
|
||
|
|
|
||
|
|
|
||
|
|
.. container:: bs-example
|
||
|
|
|
||
|
|
.. container:: table-responsive
|
||
|
|
|
||
|
|
.. class:: table-bordered table-striped
|
||
|
|
|
||
|
|
= ============= ============= ============= ============= =============
|
||
|
|
# Table heading Table heading Table heading Table heading Table heading
|
||
|
|
= ============= ============= ============= ============= =============
|
||
|
|
1 Table cell Table cell Table cell Table cell Table cell
|
||
|
|
2 Table cell Table cell Table cell Table cell Table cell
|
||
|
|
3 Table cell Table cell Table cell Table cell Table cell
|
||
|
|
= ============= ============= ============= ============= =============
|
||
|
|
|
||
|
|
.. code::
|
||
|
|
:class: highlight
|
||
|
|
|
||
|
|
.. container:: table-responsive
|
||
|
|
|
||
|
|
.. class:: table-bordered table-striped
|
||
|
|
|
||
|
|
= ============= ============= ============= ============= =============
|
||
|
|
# Table heading Table heading Table heading Table heading Table heading
|
||
|
|
= ============= ============= ============= ============= =============
|
||
|
|
1 Table cell Table cell Table cell Table cell Table cell
|
||
|
|
2 Table cell Table cell Table cell Table cell Table cell
|
||
|
|
3 Table cell Table cell Table cell Table cell Table cell
|
||
|
|
= ============= ============= ============= ============= =============
|