Tables - Elements - Spectre.css CSS Framework
Author: Yan Zhu
Description: Tables include default styles for tables and data sets. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.

PayPal GitHub

## SPECTRE

DOCS
Getting started

- Installation
- Custom version
- Browser support
- What's new

Elements

- Typography
- Tables
- Buttons
- Forms
- Icons.css
- Labels
- Code
- Media

Layout

- Flexbox grid
- Responsive
- Hero
- Navbar

Components

- Accordions
- Avatars
- Badges
- Bars
- Breadcrumbs
- Cards
- Chips
- Empty states
- Menu
- Modals
- Nav
- Pagination
- Panels
- Popovers
- Steps
- Tabs
- Tiles
- Toasts
- Tooltips

Utilities

- Colors
- Cursors
- Display
- Divider
- Loading
- Position
- Shapes
- Text

Experimentals

- 360-Degree Viewer
- Autocomplete
- Calendars
- Carousels
- Comparison sliders
- Filters
- Meters
- Off-canvas
- Parallax
- Progress
- Sliders
- Timelines

### Tables#

Tables include default styles for tables and data sets.

Name | Genre | Release date
--- | --- | ---
The Shawshank Redemption | Crime, Drama | 14 October 1994
The Godfather | Crime, Drama | 24 March 1972
Schindler's List | Biography, Drama, History | 4 February 1994
Se7en | Crime, Drama, Mystery | 22 September 1995

Add the `table` class to any <table> element. The class will add padding, border and emphasized table header.

    <table class="table">
      <thead>
        <tr>
          <th>name</th>
          <th>genre</th>
          <th>release date</th>
        </tr>
      </thead>
      <tbody>
        <tr class="active">
          <td>The Shawshank Redemption</td>
          <td>Crime, Drama</td>
          <td>14 October 1994</td>
        </tr>
      </tbody>
    </table>

#### Striped tables#

Name | Genre | Release date
--- | --- | ---
The Shawshank Redemption | Crime, Drama | 14 October 1994
The Godfather | Crime, Drama | 24 March 1972
Schindler's List | Biography, Drama, History | 4 February 1994
Se7en | Crime, Drama, Mystery | 22 September 1995

Use the `table-striped` class to <table> to add zebra striped style. For hoverable table rows, you can add the `table-hover` class to enable hover style.

Use the `active` class to make <tr> element highlighted.

    <table class="table table-striped table-hover">
      <thead>
        <tr>
          <th>name</th>
          <th>genre</th>
          <th>release date</th>
        </tr>
      </thead>
      <tbody>
        <tr class="active">
          <td>The Shawshank Redemption</td>
          <td>Crime, Drama</td>
          <td>14 October 1994</td>
        </tr>
      </tbody>
    </table>

#### Scrollable tables#

Name | Rating | Duration | Genre | Release date | Director
--- | --- | --- | --- | --- | ---
The Shawshank Redemption | R | 2h 22min | Crime, Drama | 14 October 1994 | Frank Darabont
The Godfather | R | 2h 55min | Crime, Drama | 24 March 1972 | Francis Ford Coppola
Schindler's List | R | 3h 15min | Biography, Drama, History | 4 February 1994 | Steven Spielberg
Se7en | R | 2h 7min | Crime, Drama, Mystery | 22 September 1995 | David Fincher

Add the `table-scroll` class to <table> to have a horizontally scrollable table.

    <table class="table table-scroll">
      ...
    </table>

GitHub · Twitter · PayPal Donate · Patreon Sponsor · Version

Designed and built with ♥ by Yan Zhu. Licensed under the MIT License.