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-horizontal
class added to the table with .table
class.
# | 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-vertical
class added to the table with .table
class.
# | 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-bordered
class added to the table with .table
class.
# | 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-bordernone
class added to the table with .table
class.
# | 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 .table
class added to the table with .table
class.
# | 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 |
---|---|---|---|
3 | Jacob | Thornton | @fat |
3 | Jacob | Thornton | @fat |
3 | Jacob | Thornton | @fat |
3 | Jacob | Thornton | @fat |
3 | Jacob | Thornton | @fat |
3 | Jacob | Thornton | @fat |