Limitless - Responsive Web Application Kit by Eugene Kopyov

Basic table

Example of a basic table. For basic styling (light padding and only horizontal dividers) add the base class .table to any <table>. 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.

#	First Name	Last Name	Username
1	Eugene	Kopyov	@Kopyov
2	Victoria	Baker	@Vicky
3	James	Alexander	@Alex
4	Franklin	Morrison	@Frank

Striped rows

Example of a table with striped rows. Use .table-striped added to the base .table class to add zebra-striping to any table odd row within the <tbody>. This styling doesn't work in IE8 and lower as :nth-child CSS selector isn't supported in these browser versions. Striped table can be combined with other table styles.

#	First Name	Last Name	Username
1	Eugene	Kopyov	@Kopyov
2	Victoria	Baker	@Vicky
3	James	Alexander	@Alex
4	Franklin	Morrison	@Frank

Bordered table

Example of a table with fully bordered cells. Add .table-bordered to the base .table class for borders on all sides of the table and cells. This is a default Bootstrap option for the table, for more advanced border options check Table borders page. Bordered table can be combined with other table styles.

#	First Name	Last Name	Username
1	Eugene	Kopyov	@Kopyov
2	Victoria	Baker	@Vicky
3	James	Alexander	@Alex
4	Franklin	Morrison	@Frank

Bordered striped

Example of a bordered table with stiped rows. Add .table-bordered and .table-striped classes to the base .table class for borders and row striping. This method works with all table border options.

#	First Name	Last Name	Username
1	Eugene	Kopyov	@Kopyov
2	Victoria	Baker	@Vicky
3	James	Alexander	@Alex
4	Franklin	Morrison	@Frank

Hover rows

Example of a table with hover rows state. Add .table-hover to enable a hover state on table rows within a <tbody>.

#	First Name	Last Name	Username
1	Eugene	Kopyov	@Kopyov
2	Victoria	Baker	@Vicky
3	James	Alexander	@Alex
4	Franklin	Morrison	@Frank

Scrollable table

Example of a scrollable table. To use a fixed height with scrolling, wrap any table in a div with .pre-scrollable class. Max height of the table container will be 340px and table will get a vertical scrollbar if its height is move than this value.

#	First Name	Last Name	Username
1	Eugene	Kopyov	@Kopyov
2	Victoria	Baker	@Vicky
3	James	Alexander	@Alex
4	Stanley	Martins	@Stan
5	Winnie	the Pooh	@Winnie
6	Garry	Smith	@Garry
7	Ian	Berg	@Ian
8	John	Ryan	@John
9	Frank	Giggs	@Frank
10	Jack	Gram	@Jack
11	Patrick	Lawrence	@Patrick
12	Lucy	Gulf	@Lucy
13	Dave	Armstrong	@Dave
14	Sean	Lewis	@Sean

Panel body tables Tables placed inside `panel body`.

Panel body table

Example of a table placed inside panel body. Such tables always have additional whitespace taken from .panel-body element padding.

#	First Name	Last Name	Username
1	Eugene	Kopyov	@Kopyov
2	Victoria	Baker	@Vicky
3	James	Alexander	@Alex
4	Franklin	Morrison	@Frank

Framed table

Example of framed table inside panel body. Tables that placed inside panel body don't have border around them by default, .table-framed class adds border around the table.

#	First Name	Last Name	Username
1	Eugene	Kopyov	@Kopyov
2	Victoria	Baker	@Vicky
3	James	Alexander	@Alex
4	Franklin	Morrison	@Frank

Framed bordered

Example of bordered framed table inside panel body. By default bordered table also doesn't have a border, to use border around the bordered table add .table-framed to the <table>.

#	First Name	Last Name	Username
1	Eugene	Kopyov	@Kopyov
2	Victoria	Baker	@Vicky
3	James	Alexander	@Alex
4	Franklin	Morrison	@Frank

Tables - Basic