Tables ====== Basic example ------------- For basic styling—light padding and only horizontal dividers—add the base class .table to any ``. 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 ``. .. ---------------------------------------------------------------------------- .. 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 ``. .. 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 = ============= ============= ============= ============= =============