html - 删除 之间的边框和空格，但保留 和 2 列(每列 3 个单元格)之间

Question

我有一个包含 6 列的表格，并且希望两边的 3 列在单元格之间没有边框和空格，所以最后有 2 列，每边有 3 个单元格。

为了保持行之间的边框，我让 border-collapse:separate 并且只将 border-spacing horizo​​ntal 设置为 0px。

但是现在两列每边有 3 个单元格，它们之间的间距也为 0px，但我希望它们为 2px(与行之间的间距相同)。将 border-spacing 设置回 2px 会导致顶部和底部边框线内出现一个小间隙。

我认为我对边框折叠的完整方法并不能帮助我获得我想要的布局。

有什么想法吗？这是 fiddle :Link

<fieldset>
<legend>content 1</legend>
    <table>
        <tr>
            <td class="cell1">r1c1</td>
            <td class="cell2">r1c2</td>
            <td class="cell3">r1c3</td>
            <td class="cell4">r1c4</td>
            <td class="cell5">r1c5</td>
            <td class="cell6">r1c6</td>
        </tr>
        <tr>
            <td class="cell1">r2c1</td>
            <td class="cell2">r2c2</td>
            <td class="cell3">r2c3</td>
            <td class="cell4">r2c4</td>
            <td class="cell5">r2c5</td>
            <td class="cell6">r2c6</td>
        </tr>
        <tr>
            <td class="cell1">r3c1</td>
            <td class="cell2">r3c2</td>
            <td class="cell3">r3c3</td>
            <td class="cell4">r3c4</td>
            <td class="cell5">r3c5</td>
            <td class="cell6">r3c6</td>
        </tr>
        <tr>
            <td class="cell1">r4c1</td>
            <td class="cell2">r4c2</td>
            <td class="cell3">r4c3</td>
            <td class="cell4">r4c4</td>
            <td class="cell5">r4c5</td>
            <td class="cell6">r4c6</td>
        </tr>
    </table>
</fieldset>







body {
background:white;
//width:950px;
margin:auto;
font:normal normal normal 14px/120% Arial, Helvetica, sans-serif;
padding:20px;
margin-bottom:30px;
}


fieldset {
width:400px;
margin:auto;
}

table {
border-collapse: separate;
border-spacing: 0px 2px;
text-align: center; 
}
table td.cell1,table td.cell4 {
border: 1px solid black;
border-right:none;
width:50px;
}
table td.cell2,table td.cell5 {
border: 1px solid black;
border-right:none;
border-left:none;
width:80px;
}
table td.cell3,table td.cell6 {
border: 1px solid black;
border-left:none;
width:60px;
}

Answer 1

花了一段时间，但我找到了一个非常简单的解决方案。我刚刚添加了另一个单元格作为“差距”
Link to fiddle

HTML:

    <tr>
        <td class="cell1">r1c1</td>
        <td class="cell2">r1c2</td>
        <td class="cell3">r1c3</td>
        <td class="gap_hor"></td>
        <td class="cell4">r1c4</td>
        <td class="cell5">r1c5</td>
        <td class="cell6">r1c6</td>
    </tr>

CSS:

table td.gap_hor {
border:none;
width:10px;
}