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.
Example of table column borders. Add .table-column
class with .table
for table with column border.
Home | Client | Setting |
---|---|---|
data1 | data2 | data3 |
data1 | data2 | data3 |
data1 | data2 | data3 |
Example of a solid bordered table row. This border inherits all
styling options from the default border style, the only difference
is it has 2px width. Add .border-solid
to the table
body row. This border style works only with row borders.
Firstname | Lastname | |
---|---|---|
John | Doe | john@example.com |
Mary | Moe | mary@example.com |
July | Dooley | july@example.com |
Example of a table border with custom color. Based on bootstrap
color options, you can set any of predefined colors by adding
.border-bottom-*
class to the table row. This will
works with all border styles tables demonstrated above.
Apart form bootstrap color options you can also use Stack Admin
color palette options, To set the selected border color lighten
use .border-bottom-*
where *
is the
value of your selected color from palette, and with that use
.border-bottom-lighten-*
or .border-bottom-darken-*
class where *
is the value between '1-5' of your
selected lighten/darken color from stack color palette. So for
color lighten 4 border class will be .border-bottom-lighten-4
.
Firstname | Lastname | Age | |
---|---|---|---|
John | Doe | john@example.com | 20 |
Mary | Moe | mary@example.com | 22 |
July | Dooley | july@example.com | 30 |
Piter | Draker | piter@example.com | 30 |