pelican-plugins/bootstrap-rst/doc/CSS-tables.txt

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
         = ============= ============= ============= ============= =============