horizontal table
borders. This is a default table border style attached to
.table class.All borders have the same grey color and style,
table itself doesn't have a border, but you can add this border
using .table-border-horizontalclass added to the table with
.tableclass.
| # | First Name | Last Name | Username | Role | Country |
|---|---|---|---|---|---|
| 1 | Alexander | Orton | @mdorton | Admin | USA |
| 2 | John Deo | Deo | @johndeo | User | USA |
| 3 | Randy Orton | the Bird | admin | UK | |
| 4 | Randy Mark | Ottandy | @mdothe | user | AUS |
| 5 | Ram Jacob | Thornton | admin | IND |
Vertical table borders.
This is a default table border style attached to .table
class.All borders have the same grey color and style, table itself doesn't
have a border, but you can add this border
using .table-border-verticalclass added to the table with
.tableclass.
| # | First Name | Last Name | Username | Role | Country |
|---|---|---|---|---|---|
| 1 | Alexander | Orton | @mdorton | Admin | USA |
| 2 | John Deo | Deo | @johndeo | User | USA |
| 3 | Randy Orton | the Bird | admin | UK | |
| 4 | Randy Mark | Ottandy | @mdothe | user | AUS |
| 5 | Ram Jacob | Thornton | admin | IND |
horizontal table borders.
This is a default table border style attached to .table
class.All borders have the same grey color and style, table itself doesn't
have a border, but you can add this border
using .table-borderedclass added to the table with
.tableclass.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Mark | Otto | @TwBootstrap |
| 3 | Jacob | Thornton | @fat |
horizontal table borders.
This is a default table border style attached to .table
class.All borders have the same grey color and style, table itself doesn't
have a border, but you can add this border
using .table-bordernoneclass added to the table with
.tableclass.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Mark | Otto | @TwBootstrap |
| 3 | Jacob | Thornton | @fat |
Default Table Border.This is a default table border style
attached to .table class.All borders have the same grey color
and style, table itself doesn't have a border, but you can add this border
using .tableclass added to the table with
.tableclass.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Mark | Otto | @TwBootstrap |
| 3 | Jacob | Thornton | @fat |
solid border inside table
thead. This border inherits all styling options from the
default border style, the only difference is it has 2px width.
Sometimes it could be useful for visual separation and addition highlight.
To use this border add .border-solid to the table head row.
This border style works only with row borders.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Mark | Otto | @TwBootstrap |
| 3 | Jacob | Thornton | @fat |
double border inside table
head. This border has 4px width, Just
addtable-double with table for this default table.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Mark | Otto | @TwBootstrap |
| 3 | Jacob | Thornton | @fat |
dotted border inside table
head. This border has 2px width, Just
addtable-dotted with table for this default table.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Mark | Otto | @TwBootstrap |
| 3 | Jacob | Thornton | @fat |
dashed border inside table
head. This border has 2px width, Just
addtable-dashed with table for this default table.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Mark | Otto | @TwBootstrap |
| 3 | Jacob | Thornton | @fat |
custom color. According to the custom color system
options, you can set any of predefined colors by adding
.border-bottom-* class to the table head row. This technique
works with all border styles demonstrated above.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Jacob | Thornton | @fat |
| 2 | Jacob | Thornton | @fat |
| 3 | Jacob | Thornton | @fat |
| 4 | Jacob | Thornton | @fat |
| 5 | Jacob | Thornton | @fat |
| 6 | Jacob | Thornton | @fat |
Try It Real Time