这是期望的效果：
这就是我提出的：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;
}
}
}
}
}
它只是缺少表格行和表格边框之间的空格.我尝试过使用边距,填充,边框,边框折叠但我无法达到预期的效果.任何想法？
解决方法
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;
}
}
