The designers sometimes give us a design that includes tables, and those tables have background colors on either the table cells or the table headings. It sounds easy enough, just by putting a border-radius on the table. But the bad news is that if you also happen to have a border on that table, the border corners will stay sharp while the background colors will be rounded within that, and it looks really weird.
The answer lies in the border-collapse: separate property. Used on its own this doesn’t look so hot, because back in the day it was just used for the space between cells and makes your tables automatically look like they were made in the early 90s with Notepad and dial-up internet.
Here’s a pre-built tables.scss file for you to copy and paste, which is set up so that all corners, including borders and backgrounds, will be rounded properly on your table. You can update as needed to match your design. It utilizes the built-in Bootstrap 4 setup (with SASS) and variables, but you can also adapt this to work in Bootstrap 2 or 3 if needed.
How To - tables.scss
.swiper {
}
.table-responsive {
table, table.table {
min-width: 600px;
width: 100%;
background-color: $white;
border-radius: $border-radius;
overflow: hidden;
thead {
tr {
td, th {
text-align: left;
border-top: 0;
border-bottom: 0;
border-right: 1px solid $table-border-color;
padding: 18px 20px;
font-size: $font-size-sm;
line-height: $font-size-sm + 5px;
&:last-child {
border-right: 0;
}
}
}
}
tbody {
tr {
th,td {
text-align: center;
border-right: 1px solid $table-border-color;
padding: 18px 20px;
&:first-child {
font-size: $font-size-base;
line-height: $font-size-base + 5px;
font-weight: $font-weight-bold;
text-align: left;
}
&:last-child {
border-right: 0;
}
}
}
}
tfoot {
tr {
td {
}
}
}
&.table-striped {
border: 1px solid $table-border-color;
border-radius: $border-radius;
border-collapse: separate!important;
border-spacing: 0;
thead {
tr {
td, th {
background-color: $purple;
border: 0;
border-right: 1px solid $table-border-color;
border-bottom: 1px solid $table-border-color;
color: $white;
&:first-child {
border-top-left-radius: $border-radius;
}
&:last-child {
border-top-right-radius: $border-radius;
border-right: 0;
}
}
}
}
tbody {
tr {
td, th {
border: 0;
border-right: 1px solid $table-border-color;
border-bottom: 1px solid $table-border-color;
&:first-child {
font-size: $font-size-sm;
line-height: $font-size-sm + 5px;
font-weight: $font-weight-bold;
}
&:last-child {
border-right: 0;
}
}
&:last-child {
th,td {
border-bottom: 0;
}
}
}
}
}
&.table-bordered {
border: 1px solid $table-border-color;
border-radius: $border-radius;
border-collapse: separate!important;
border-spacing: 0;
thead {
tr {
td, th {
background-color: $purple;
border: 0;
border-right: 1px solid $table-border-color;
border-bottom: 1px solid $table-border-color;
color: $white;
&:first-child {
border-top-left-radius: $border-radius;
}
&:last-child {
border-top-right-radius: $border-radius;
border-right: 0;
}
}
}
}
tbody {
tr {
td, th {
border: 0;
border-right: 1px solid $table-border-color;
border-bottom: 1px solid $table-border-color;
&:first-child {
font-size: $font-size-sm;
line-height: $font-size-sm + 5px;
font-weight: $font-weight-bold;
}
&:last-child {
border-right: 0;
}
}
&:last-child {
th,td {
border-bottom: 0;
}
}
}
}
}
}
}
Example Sites
- First Eagle Bank (Only the top corners are rounded, not bottom corners)
- Embers Credit Union (All 4 corners are rounded)
Tags: bs4, bs3, bs2, scss, sass, tables