{% extends "layouts/base.html" %} {% block title %} UI Tables {% endblock %} {% block stylesheets %}{% endblock stylesheets %} {% block content %}

Tables

Basic Table
Using the most basic table markup, here’s how .table-based tables look in Bootstrap.
Name Phone Number Date of Birth Actions
Vanessa Tucker 864-348-0485 June 21, 1961
William Harris 914-939-2458 May 15, 1948
Sharon Lessman 704-993-5435 September 14, 1965
Christina Mason 765-382-8195 April 2, 1971
Robin Schneiders 202-672-1407 October 12, 1966
Striped Rows
Use .table-striped to add zebra-striping to any table row within the <tbody>.
Name Phone Number Date of Birth Actions
Vanessa Tucker 864-348-0485 June 21, 1961
William Harris 914-939-2458 May 15, 1948
Sharon Lessman 704-993-5435 September 14, 1965
Christina Mason 765-382-8195 April 2, 1971
Robin Schneiders 202-672-1407 October 12, 1966
Condensed Table
Add .table-sm to make tables more compact by cutting cell padding in half.
Operation System Users Share
Windows 8.232 40%
Mac OS 3.322 20%
Linux 4.232 34%
FreeBSD 1.121 12%
Chrome OS 1.331 15%
Android 2.301 20%
iOS 1.162 14%
Windows Phone 562 7%
Other 1.181 14%
Hoverable Rows
Add .table-hover to enable a hover state on table rows within a <tbody>.
Name Phone Number Date of Birth
Avatar Vanessa Tucker 864-348-0485 June 21, 1961
Avatar William Harris 914-939-2458 May 15, 1948
Avatar Sharon Lessman 704-993-5435 September 14, 1965
Avatar Christina Mason 765-382-8195 April 2, 1971
Bordered Table
Add .table-bordered for borders on all sides of the table and cells.
Name Phone Number Date of Birth Actions
Vanessa Tucker 864-348-0485 June 21, 1961
William Harris 914-939-2458 May 15, 1948
Sharon Lessman 704-993-5435 September 14, 1965
Christina Mason 765-382-8195 April 2, 1971
Robin Schneiders 202-672-1407 October 12, 1966
Contextual Classes
Use contextual classes to color table rows or individual cells.
Name Phone Number Date of Birth Actions
Vanessa Tucker 864-348-0485 June 21, 1961
William Harris 914-939-2458 May 15, 1948
Sharon Lessman 704-993-5435 September 14, 1965
Christina Mason 765-382-8195 April 2, 1971
Robin Schneiders 202-672-1407 October 12, 1966
Always responsive
Across every breakpoint, use .table-responsive for horizontally scrolling tables.
# Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell Cell
{% endblock content %} {% block javascripts %}{% endblock javascripts %}