Carrot CSS

Tables

Due to the widespread use of tables across third-party widgets like calendars and date pickers, we’ve designed our tables to be opt-in. Just add the base class .table to any table, then extend with custom styles or our various included modifier classes.

From the Bootstrap table documentation

In carrot CSS we'll act the same, so you'll need to be manually add the table class to the table you want to stylize.

See _tables_.scss file on Github

Examples

A table of sega consoles

NameDate of release
Master System1985
Mega Drive (Genesis)1988
Game Gear1990
Saturn1994
Dreamcast1998

Make a table vertical scroll by wrapping it in a container with the reel class. Learn more about the reel layout utility.

NameDate of releaseFiller
Master System1985Some quite long text that will surely make the table bigger than the container. Let's make sure this text is long enough for the largest screens like 1440p or 4k or even the brand new 8k screen size, but you'll probably need a beefy GPU anyway.
Mega Drive (Genesis)1988Some quite long text that will surely make the table bigger than the container. Let's make sure this text is long enough for the largest screens like 1440p or 4k or even the brand new 8k screen size, but you'll probably need a beefy GPU anyway.
Game Gear1990Some quite long text that will surely make the table bigger than the container. Let's make sure this text is long enough for the largest screens like 1440p or 4k or even the brand new 8k screen size, but you'll probably need a beefy GPU anyway.
Saturn1994Some quite long text that will surely make the table bigger than the container. Let's make sure this text is long enough for the largest screens like 1440p or 4k or even the brand new 8k screen size, but you'll probably need a beefy GPU anyway.
Dreamcast1998Some quite long text that will surely make the table bigger than the container. Let's make sure this text is long enough for the largest screens like 1440p or 4k or even the brand new 8k screen size, but you'll probably need a beefy GPU anyway.