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

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

不如将border 添加到td，而是将其添加到span 内的td。快速示例：

body{
  margin:0;
  padding:10px;
}

table{
  width:100%;
  /* reset */
  border-collapse: collapse;
  border-spacing: 0;
}

/* some padding top/bottom for every td */
td{
  padding-top:10px;
  padding-bottom:10px;
  margin:0;
}

/* first and last row border */
table tr:first-child{border-top: 1px solid black}
table tr:nth-child(3){border-bottom: 1px solid black}


/* adding padding to the td's */
table tr>td:first-of-type{padding-left: 10px; padding-right:0; border-left: 1px solid black;padding-left:50px}
table tr>td:nth-of-type(2){padding-left:0;padding-right:0;}
table tr>td:nth-of-type(3){padding-right: 10px; padding-left: 0; border-right: 1px solid black;text-align:right; padding-right: 50px;}

/* adding border to spans */
table tr>td:first-of-type>span{border-bottom: 1px solid black; display:block;}
table tr>td:nth-of-type(2)>span{border-bottom: 1px solid black; display:block;}
table tr>td:nth-of-type(3)>span{border-bottom: 1px solid black; display:block;}

<table>
  <tr>
    <td><span>11</span></td>
    <td><span>12</span></td>
    <td><span>13</span></td>
  </tr>
  <tr>
    <td><span>21</span></td>
    <td><span>22</span></td>
    <td><span>23</span></td>
  </tr>
  <tr>
    <td><span>31</span></td>
    <td><span>32</span></td>
    <td><span>33</span></td>
  </tr>
</table>

JSFiddle

我将padding 添加到td，并在td 内部使用display:block 到spans，这样它们就可以获得所有宽度。

Answer 2

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！

Answer 3

我只需在行之间添加一条水平线 (<hr>)：

<tr><td colspan="3"><hr>

如果您设置hr 的样式，它将对您的布局影响最小：

hr {
  background: #ddd;
  height: 1px;
  margin: 0px;
}

不完全是semantic，但它可以完成工作。

Fiddle

请注意，我已经从表中删除了 table 类，因为它没有在您的样式表中定义，所以它取而代之的是 jsFiddle 的样式。

Answer 4

我知道这是一个愚蠢的 hack。但我只是在里面放了一个空单元格。我希望有人对此有很好的解决方案。

http://jsfiddle.net/3j6782js/1/

<tr>
        <td class='space'></td>
        <td>Brand name</td>
        <td>2</td>
        <td>
            <a class='btn btn-purple btn-xs sw-btn' href='#'>MANAGE CAMPAIGNS</a>
            <a class='btn btn-grey btn-xs sw-btn' href='#'>EDIT</a>
        </td>
</tr>

.space {
width:10px !important;
border-top:none !important;
}