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-framed
class added to the table with .table
class.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
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-framed
class added to the table with .table
class.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
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-framed
class added to the table with .table
class.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
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-framed
class added to the table with .table
class.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
thead
border. This border has 1px width and slightly darker color than other borders for better visual separation of table head
and table body
. Vertical cell borders in the table head always have the same color as borders in table body.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
solid
border inside table head. 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.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
double
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 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
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 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |