Roomy bootstrap 4 table with border spacing

readme.md

This creates a roomy table with borders around it. The important stuff here is the border-spacing and border-collapse. border-collaps: 0px 5px; -> 0px means the spacing between the cells (left and right), 5px is the spacing between the rows.

roomy.css

.table.roomy {
  border-spacing: 0px 5px;
  border-collapse: inherit;
}
.table.roomy > tbody > tr > td {
  border-top: 1px solid #e4e7ea;
  border-bottom: 1px solid #e4e7ea;
}

.table.roomy > tbody > tr > td:last-child {
  border-right: 1px solid #e4e7ea;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.table.roomy > tbody > tr > td:first-child {
  border-left: 1px solid #e4e7ea;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.table.roomy > tbody > tr {
  box-shadow: 0 2px 6px 0 hsla(0, 0%, 0%, 0.2);
}

form.inline-block{
  display: inline-block;
}