#### Tables - Borders

Statistics Invoices Schedule

###### 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 `.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 `.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 `.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