logo small logo dark logo small logo
  1. Velonic
  2. Tables
  3. Basic Tables

Basic Tables

Basic example

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.

Name Phone Number Date of Birth Country
Risa D. Pearson 336-508-2157 July 24, 1950 India
Ann C. Thompson 646-473-2057 January 25, 1959 USA
Paul J. Friend 281-308-0793 September 1, 1939 Canada
Linda G. Smith 606-253-1207 May 3, 1962 Brazil

Inverse table

You can also invert the colors—with light text on dark backgrounds—with .table-dark.

Name Phone Number Date of Birth Country
Risa D. Pearson 336-508-2157 July 24, 1950 Malaysia
Ann C. Thompson 646-473-2057 January 25, 1959 Belgium
Paul J. Friend 281-308-0793 September 1, 1939 Australia
Sean C. Nguyen 269-714-6825 February 5, 1994 Algeria

Striped rows

Use .table-striped to add zebra-striping to any table row within the <tbody>.

User Account No. Balance Action
table-user Risa D. Pearson AC336 508 2157 July 24, 1950
table-user Ann C. Thompson SB646 473 2057 January 25, 1959
table-user Paul J. Friend DL281 308 0793 September 1, 1939
table-user Sean C. Nguyen CA269 714 6825 February 5, 1994

Table head options

Use one of two modifier classes to make <thead>s appear light or dark gray.

Product Courier Process Status
ASOS Ridley High Waist FedEx
Delivered
Marco Lightweight Shirt DHL
Shipped
Half Sleeve Shirt Bright
Order Received
Lightweight Jacket FedEx
Delivered
Cargo Pant & Shirt FedEx
Payment Failed

Hoverable rows

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

Product Price Quantity Amount
ASOS Ridley High Waist $79.49 82 Pcs $6,518.18
Marco Lightweight Shirt $128.50 37 Pcs $4,754.50
Half Sleeve Shirt $39.99 64 Pcs $2,559.36
Lightweight Jacket $20.00 184 Pcs $3,680.00

Small table

Add .table-sm to make tables more compact by cutting cell padding in half.

Product Price Quantity Amount
ASOS Ridley High Waist $79.49 82 Pcs $6,518.18
Marco Lightweight Shirt $128.50 37 Pcs $4,754.50
Half Sleeve Shirt $39.99 64 Pcs $2,559.36
Lightweight Jacket $20.00 184 Pcs $3,680.00
Marco Shoes $28.49 69 Pcs $1,965.81
ASOS Ridley High Waist $79.49 82 Pcs $6,518.18

Bordered table

Add .table-bordered for borders on all sides of the table and cells.

User Account No. Balance Action
table-user Risa D. Pearson AC336 508 2157 July 24, 1950
table-user Ann C. Thompson SB646 473 2057 January 25, 1959
table-user Paul J. Friend DL281 308 0793 September 1, 1939
table-user Sean C. Nguyen CA269 714 6825 February 5, 1994

Bordered color table

Add .table-bordered & .border-primary can be added to change colors.

User Account No. Balance Action
table-user Risa D. Pearson AC336 508 2157 July 24, 1950
table-user Ann C. Thompson SB646 473 2057 January 25, 1959
table-user Paul J. Friend DL281 308 0793 September 1, 1939
table-user Sean C. Nguyen CA269 714 6825 February 5, 1994

Always responsive

Across every breakpoint, use .table-responsive for horizontally scrolling tables. Use .table-responsive{-sm|-md|-lg|-xl} as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.

# 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

Basic Borderless Example

Add .table-borderless for a table without borders.

Name Phone Number Date of Birth Country
Risa D. Pearson 336-508-2157 July 24, 1950 India
Ann C. Thompson 646-473-2057 January 25, 1959 USA
Paul J. Friend 281-308-0793 September 1, 1939 Canada
Linda G. Smith 606-253-1207 May 3, 1962 Brazil

Inverse Borderless table

Add .table-borderless for a table without borders.

Name Phone Number Date of Birth Country
Risa D. Pearson 336-508-2157 July 24, 1950 Malaysia
Ann C. Thompson 646-473-2057 January 25, 1959 Belgium
Paul J. Friend 281-308-0793 September 1, 1939 Australia
Sean C. Nguyen 269-714-6825 February 5, 1994 Algeria

Active tables

Highlight a table row or cell by adding a .table-active class.

Name Phone Number Date of Birth Country
Risa D. Pearson 336-508-2157 July 24, 1950 Belgium
Ann C. Thompson 646-473-2057 January 25, 1959 Malaysia
Paul J. Friend 281-308-0793 September 1, 1939 Algeria
Linda G. Smith 606-253-1207 Australia
Paul J. Friend 281-308-0793 September 1, 1939 India

Nesting

Border styles, active styles, and table variants are not inherited by nested tables.

Name Phone Number Date of Birth Country
Risa D. Pearson 336-508-2157 July 24, 1950 India
Name Phone Number Date of Birth Country
Risa D. Pearson 336-508-2157 July 24, 1950 Malaysia
Ann C. Thompson 646-473-2057 January 25, 1959 Canada
Linda G. Smith 606-253-1207 September 2, 1939 Belgium
© Velonic - Theme by Techzaa
Theme Settings
Color Scheme
Light
Dark
Layout Mode
Fluid
Boxed
Topbar Color
Light
Dark
Menu Color
Light
Dark
Layout Position
Buy Now