Horizontal Borders
Example ofhorizontal 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 Borders
Example ofVertical 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 |
Both Bordeds
Example ofhorizontal 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 |
Borderless Table
Example ofhorizontal 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
Example ofDefault 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
Example of asolid 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
Example of adouble border inside table head. This border has 3px width, double style and inherits all styling options from the default border style. Visually it displays table head and body as 2 separated table areas. To use this border add .border-double to the table head row.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Mark | Otto | @TwBootstrap |
| 3 | Jacob | Thornton | @fat |
Dotted Border
Example of adotted border inside table head. This border has 3px width, dotted style and inherits all styling options from the default border style. Visually it displays table head and body as 2 separated table areas. To use this border add .border-dotted to the table head row.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Mark | Otto | @TwBootstrap |
| 3 | Jacob | Thornton | @fat |
Dashed Border
Example of adashed border inside table head. This border has 3px width, dashed style and inherits all styling options from the default border style. Visually it displays table head and body as 2 separated table areas. To use this border add .border-dashed to the table head row.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Mark | Otto | @TwBootstrap |
| 3 | Jacob | Thornton | @fat |
Border Bottom Color
EExample of a table head border withcustom 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 |
|---|---|---|---|
| 3 | Jacob | Thornton | @fat |
| 3 | Jacob | Thornton | @fat |
| 3 | Jacob | Thornton | @fat |
| 3 | Jacob | Thornton | @fat |
| 3 | Jacob | Thornton | @fat |
| 3 | Jacob | Thornton | @fat |