html - 如何在表格行和表格边缘之间设置左右间距？

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;
        }
      }
    }
  }
}

它只是缺少表格行和表格边框之间的空间。我试过使用 margin、padding、border、border-collapse，但我无法达到预期的效果。有什么想法吗？

Answer 1

Check this fiddle:

我做的最重要的事情是将第一个和最后一个元素包装在 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!