Border options
Examples of<tbody>
borders
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 | Eugene | Kopyov | @Kopyov |
2 | Victoria | Baker | @Vicky |
3 | James | Alexander | @Alex |
4 | Franklin | Morrison | @Frank |
Vertical borders
Example of
vertical
table borders. This custom table border layout displays vertical borders only. However border between table head
and table body
is also visible for better visual separation. To use this layout add .table-columned
class to the table with .table
class.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Eugene | Kopyov | @Kopyov |
2 | Victoria | Baker | @Vicky |
3 | James | Alexander | @Alex |
4 | Franklin | Morrison | @Frank |
Both borders
Example of a fully
bordered
table. Here we have both vertical and horizontal borders displayed. All borders have the same color, table head
is visually divided from the table body
with a bit darker border color. To use this layout add .table-bordered
class to the table with .table
class.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Eugene | Kopyov | @Kopyov |
2 | Victoria | Baker | @Vicky |
3 | James | Alexander | @Alex |
4 | Franklin | Morrison | @Frank |
Borderless table
Example of
borderless
table. Here all border are hidden, except border between table head
and table body
, table body
and table footer
, this border is added to all table layouts and is always visible. To hide all borders from the table, add .table-borderless
class to the table with .table
class.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Eugene | Kopyov | @Kopyov |
2 | Victoria | Baker | @Vicky |
3 | James | Alexander | @Alex |
4 | Franklin | Morrison | @Frank |
Table head borders
Basic and custom<thead>
row borders
Default 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 | Eugene | Kopyov | @Kopyov |
2 | Victoria | Baker | @Vicky |
3 | James | Alexander | @Alex |
4 | Franklin | Morrison | @Frank |
Solid border
Example of a
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 .table-border-solid
to the table head row.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Eugene | Kopyov | @Kopyov |
2 | Victoria | Baker | @Vicky |
3 | James | Alexander | @Alex |
4 | Franklin | Morrison | @Frank |
Double border
Example of a
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 | Eugene | Kopyov | @Kopyov |
2 | Victoria | Baker | @Vicky |
3 | James | Alexander | @Alex |
4 | Franklin | Morrison | @Frank |
Border 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. You can check all available colors here →.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Eugene | Kopyov | @Kopyov |
2 | Victoria | Baker | @Vicky |
3 | James | Alexander | @Alex |
4 | Franklin | Morrison | @Frank |
Table body borders
Custom<tbody>
border styling
Default border
Example of default borders inside table body. Basic table body borders have the same
light grey
color, style and width. Since this is a default table body border styling, rows don't require any additional classes and work in default markup with .table
classes added to the table.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Eugene | Kopyov | @Kopyov |
2 | Victoria | Baker | @Vicky |
3 | James | Alexander | @Alex |
4 | Franklin | Morrison | @Frank |
Solid border
Example of a
solid
borders inside table body. This border inherits all styling options from the default border style, the only difference is it has 2px
width. To use this border add .table-border-solid
to the table body
row. This border style works only with horizontal borders.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Eugene | Kopyov | @Kopyov |
2 | Victoria | Baker | @Vicky |
3 | James | Alexander | @Alex |
4 | Franklin | Morrison | @Frank |
Double border
Example of
double
borders inside table body. This has 3px
width and double
style. Visually it separates rows and the table looks more like a list of rows. To use this border add .border-double
to the table body
row. This border style works only with horizontal borders.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Eugene | Kopyov | @Kopyov |
2 | Victoria | Baker | @Vicky |
3 | James | Alexander | @Alex |
4 | Franklin | Morrison | @Frank |
Dashed border
Example of
dashed
borders inside table body. This border perfectly fits when you need to highlight incomplete or extra rows. Dashed border style works only with horizontal borders and only in table body, it is mostly useless in table head. To use this border style add .table-border-dashed
to the table body
row.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Eugene | Kopyov | @Kopyov |
2 | Victoria | Baker | @Vicky |
3 | James | Alexander | @Alex |
4 | Franklin | Morrison | @Frank |