Scrolling Tables

A simple, side-scrolling table where row headings are sticky on wider layouts. When a table is scrollable, a 'shadow' effect appears on the right inner edge.

Options:

  • table-responsive--sticky-row-headers modifier class makes tbody row headers sticky once tables reach 400px wide.
  • table-responsive--no-wrap modifier class stops text-wrapping in cells - only good for small amounts of text.

Just the table-responsive wrapping element:

# Name Nickname Age Handle Location Nationality Favourite Colour
1 Mark Jameson 35 The Godfather @thegodfather-kinda Oban Scottish Rust
2 Jacob Brotherton 64 Master Of The Universe @universemaster-uk Newport Welsh Magenta
3 John McDermold 29 Not Your Average John @not-your-average-john-official Durham English Turquoise

As above but with table-responsive--sticky-row-headers modifier class:

# Name Nickname Age Handle Location Nationality Favourite Colour
1 Mark Jameson 35 The Godfather @thegodfather-kinda Oban Scottish Rust
2 Jacob Brotherton 64 Master Of The Universe @universemaster-uk Newport Welsh Magenta
3 John McDermold 29 Not Your Average John @not-your-average-john-official Durham English Turquoise

As above but with table-responsive--no-wrap modifier class:

# Name Nickname Age Handle Location Nationality Favourite Colour
1 Mark Jameson 35 The Godfather @thegodfather-kinda Oban Scottish Rust
2 Jacob Brotherton 64 Master Of The Universe @universemaster-uk Newport Welsh Magenta
3 John McDermold 29 Not Your Average John @not-your-average-john-official Durham English Turquoise