Question

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

为了保持行之间的边界，我设border-collapse:separate并仅将border-spacing水平设置为0px。

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

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

有什么想法吗？这是小提琴：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

花了一段时间，但我找到了一个非常简单的解决方案。我刚刚添加了另一个单元格作为＆＃39; gap＆＃39;
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;
}

Answer 2

一种稍微复杂的方法是使用CSS＆＃39; :nth-child()伪类来设置元素的样式，如果要将另外三个<td>元素添加到行中，则该元素具有可立即展开的优点：

/* Styling the common features: */
td {
  width: 60px;
  text-align: center;
  border: 1px solid #000;
}
/* removing the border on the left and right of the middle
   cell from each group of three: */
td:nth-child(2n) {
  border-left-width: 0;
  border-right-width: 0;
}
/* removing the right border from the preceding cell: */
td:nth-child(2n-1) {
  border-right-width: 0;
}
/* removing the left border from the following cell: */
td:nth-child(2n+1) {
  border-left-width: 0;
}
/* restoring the left border on the first cell matched by
   the (2n+1) rule: */
td:first-child {
  border-left-width: 1px;
}
/* restoring the border-right on the last-cell: */
td:last-child {
  border-right-width: 1px;
}
/* adding padding-right to the third of each group of three */
td:nth-child(3n) {
  padding-right: 5px;
}
/* adding padding left to the first cell of each group of three,
   and relative positioning: */
td:nth-child(3n + 1) {
  position: relative;
  padding-left: 5px;
}
/* creating a pseudo-element to replace the borders, and
   emulate a separating column: */
td:nth-child(3n + 1)::after {
  content: '';
  position: absolute;
  width: 10px;
  top: -1px;
  bottom: -1px;
  left: -5px;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  background-color: #fff;

}
/* hiding the pseudo-element from the first cell: */
td:first-child::after {
  width: 0;
  height: 0;
  border-width: 0;
}

＆＃13;

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;
}

td {
  width: 60px;
  text-align: center;
  border: 1px solid #000;
}

td:nth-child(2n) {
  border-left-width: 0;
  border-right-width: 0;
}
td:nth-child(2n-1) {
  border-right-width: 0;
}
td:nth-child(2n+1) {
  border-left-width: 0;
}
td:first-child {
  border-left-width: 1px;
}
td:last-child {
  border-right-width: 1px;
}

td:nth-child(3n) {
  padding-right: 5px;
}

td:nth-child(3n + 1) {
  position: relative;
  padding-left: 5px;
}

td:nth-child(3n + 1)::after {
  content: '';
  position: absolute;
  width: 10px;
  top: -1px;
  bottom: -1px;
  left: -5px;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  background-color: #fff;
  
}

td:first-child::after {
  width: 0;
  height: 0;
  border-width: 0;
}

＆＃13;

<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>
      <td class="cell7">r1c7</td>
      <td class="cell8">r1c8</td>
      <td class="cell9">r1c9</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>
      <td class="cell7">r2c7</td>
      <td class="cell8">r2c8</td>
      <td class="cell9">r2c9</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>
      <td class="cell7">r3c7</td>
      <td class="cell8">r3c8</td>
      <td class="cell9">r3c9</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>
      <td class="cell7">r4c7</td>
      <td class="cell8">r4c8</td>
      <td class="cell9">r4c9</td>
    </tr>
  </table>
</fieldset>

＆＃13;

或者，一些稍微复杂的选择器：

td {
  width: 60px;
  text-align: center;
  border: 1px solid #000;
  border-left-width: 0;
  border-right-width: 0;
}

td:first-child {
  border-left-width: 1px;
}

td:last-child {
  border-right-width: 1px;
}

td:nth-child(3n) {
  padding-right: 5px;
}

td:first-child ~ td:nth-child(3n+1) {
  padding-left: 5px;
  position: relative;
}

td:first-child ~ td:nth-child(3n+1)::before {
  content: '';
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -5px;
  width: 10px;
  background-color: #fff;
  border-right: 1px solid #000;
  border-left: 1px solid #000;
}

＆＃13;

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;
}

td {
  width: 60px;
  text-align: center;
  border: 1px solid #000;
  border-left-width: 0;
  border-right-width: 0;
}

td:first-child {
  border-left-width: 1px;
}

td:last-child {
  border-right-width: 1px;
}

td:nth-child(3n) {
  padding-right: 5px;
}

td:first-child ~ td:nth-child(3n+1) {
  padding-left: 5px;
  position: relative;
}

td:first-child ~ td:nth-child(3n+1)::before {
  content: '';
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -5px;
  width: 10px;
  background-color: #fff;
  border-right: 1px solid #000;
  border-left: 1px solid #000;
}

＆＃13;

<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>
      <td class="cell7">r1c7</td>
      <td class="cell8">r1c8</td>
      <td class="cell9">r1c9</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>
      <td class="cell7">r2c7</td>
      <td class="cell8">r2c8</td>
      <td class="cell9">r2c9</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>
      <td class="cell7">r3c7</td>
      <td class="cell8">r3c8</td>
      <td class="cell9">r3c9</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>
      <td class="cell7">r4c7</td>
      <td class="cell8">r4c8</td>
      <td class="cell9">r4c9</td>
    </tr>
  </table>
</fieldset>

＆＃13;

删除之间的边界和空格，但保持在2列之间（每3个单元格）

2 个答案: