如何在表格行和表格边缘之间有左右间距？

Question

这是期望的效果:

这就是我提出的:http://jsfiddle.net/nunoarruda/3j6782js/

// table
.sw-table {
  border-collapse: separate;

  thead {
    background-color: $orange;
    color: $white;
    font-size: 15px;

    th {
      border: none !important;
      font-weight: 600;
      padding-top: 5px !important;
      padding-bottom: 5px !important;
      margin: 30px 27px !important;

      &:first-child {
        border-top-left-radius: 10px;
        padding-left: 25px;
      }

      &:last-child {
        border-top-right-radius: 10px;
      }
    }
  }

  tbody {
    color: $black;

    tr {
      td {
        border-color: $greyish;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
      }

      td:first-child {
        border-left: 1px solid $greyish;
        padding-left: 25px;
      }

      td:last-child {
        border-right: 1px solid $greyish;
      }

      &:first-child td {
        border-top: none;
      }

      &:last-child td {
        border-bottom: 1px solid $greyish;

        &:first-child {
           border-bottom-left-radius: 10px;
        }

        &:last-child {
          border-bottom-right-radius: 10px;
        }
      }
    }
  }
}

它只是缺少表格行和表格边框之间的空格.我尝试过使用边距,填充,边框,边框折叠但我无法达到预期的效果.任何想法？

Answer 1

检查这个小提琴：

我做的最重要的事情是将第一个和最后一个项目包装在 div 中并设置它们的样式：

<td>
  <div>Brand name</div>
</td>

这使我可以取消 td 的填充/边框并将其移动到 div：

td:first-child {
  border-left: 1px solid $greyish;
  padding-left: 25px;
  padding-top: 0;
  padding-right: 0;
  border-top: none;
  div {
    border-top: 1px solid $greyish; 
    padding-top: 10px; 
    padding-right: 8px;
  }            
}

我做的最后一件事是删除填充上的 !important ，因为这会干扰新代码。边框现在附加到第一个和最后一个孩子内部的 div 而不是 tds！