Horizontal Borders
Example of 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 |
@twitter |
Vertical Borders
Example of 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 |
@twitter |
Both Borders
Example of 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 |
@twitter |
Borderless Table
Example of 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 |
@twitter |
Default Table Border
Example of a default 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 |
@twitter |
Border Bottom Color
Example of a table head border with 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 |
@twitter |