# Table Structure ## Table Overview Due to the widespread use of `` elements across third-party widgets like calendars and date pickers, Bootstrap’s tables are **opt-in**. Add the base class `.table` to any `
`, then extend with our optional modifier classes or custom styles. All table styles are not inherited in Bootstrap, meaning any nested tables can be styled independent from the parent. Using the most basic table markup, here’s how `.table`-based tables look in Bootstrap. ```markup
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
``` These classes can also be added to table variants: ### Bordered tables Add `.table-bordered` for borders on all sides of the table and cells. ```markup ...
``` ### Hoverable rows Add `.table-hover` to enable a hover state on table rows within a ``. ```markup ...
``` ### Table head Similar to tables and dark tables, use the modifier classes `.table-light` or `.table-dark` to make ``s appear light or dark gray. ```markup ... ...
``` ### Vertical alignment Table cells of `` are always vertical aligned to the bottom. Table cells in `` inherit their alignment from `` and are aligned to the top by default. ```markup
... ... ...
... ... This cell is aligned to the top. ...
``` ### Nesting Border styles, active styles, and table variants are not inherited by nested tables. ```markup ... ... ...
...
``` {% hint style="success" %} **How nesting works** To prevent *any* styles from leaking to nested tables, we use the child combinator (`>`) selector in our CSS. Since we need to target all the `td`s and `th`s in the `thead`, `tbody`, and `tfoot`, our selector would look pretty long without it. As such, we use the rather odd looking `.table > :not(caption) > * > *` selector to target all `td`s and `th`s of the `.table`, but none of any potential nested tables. Note that if you add ``s as direct children of a table, those `` will be wrapped in a `` by default, thus making our selectors work as intended. {% endhint %} ### Responsive tables Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a `.table` with `.table-responsive`. Or, pick a maximum breakpoint with which to have a responsive table up to by using `.table-responsive{-sm|-md|-lg|-xl|-xxl}`. ```markup
...
``` ## Navs and tabs Navigation available in Bootstrap share general markup and styles, from the base `.nav` class to the active and disabled states. Swap modifier classes to switch between each style. The base `.nav` component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling. {% hint style="danger" %} Use the tab JavaScript plugin—include it individually or through the compiled `bootstrap.js` file—to extend our navigational tabs and pills to create tabbable panes of local content. {% endhint %} ```markup ``` ### JavaScript behavior To help fit your needs, this works with `