Question

我想达到以下效果：

我必须使用的HTML是一个简单的表：

<table id="a">
  <thead>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
  </tfoot>
</table>

为了获得圆角边框，我必须更改td元素以显示为inline-block。

我的问题在于灰色条纹。我最终在行之间留有空白。我不能使用单独的背景元素，因为行数会改变。编辑 我需要边框之间的间距，但希望灰色列中的白色间隙也是灰色的......

我的尝试在这里：https://jsfiddle.net/h5Lh1eaw/24/

是否有神奇的CSS来做我不知道的事情？

Answer 1

是的！您必须将border-collapse: collapse提供给<table>并且您拥有：

<强> CSS

table#a, table#b {
  border-collapse: collapse;
}

预览

<强>段

* { box-sizing: border-box; } table#a { border-collapse: collapse; } table#b { border-collapse: collapse; } td:nth-child(2) { background-color: #c0c0c0; } tbody tr { margin: 5px; } td { display: inline-block; padding: 3px; width: 200px; } tbody td { border-top: 1px solid black; border-bottom: 1px solid black; } tbody td:first-of-type { border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-left: 1px solid black; } tbody td:last-of-type { border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-right: 1px solid black; }

<p> A: </p> <table id="a"> <thead> <tr> <td>normal</td> <td>grey</td> <td>normal</td> </tr> </thead> <tbody> <tr> <td>normal</td> <td>grey</td> <td>normal</td> </tr> <tr> <td>normal</td> <td>grey</td> <td>normal</td> </tr> </tbody> <tfoot> <tr> <td>normal</td> <td>grey</td> <td>normal</td> </tr> </tfoot> </table> <p> B: </p> <table id="b"> <thead> <tr> <td>normal</td> <td>grey</td> <td>normal</td> </tr> </thead> <tbody> <tr> <td>normal</td> <td>grey</td> <td>normal</td> </tr> <tr> <td>normal</td> <td>grey</td> <td>normal</td> </tr> </tbody> <tfoot> <tr> <td>normal</td> <td>grey</td> <td>normal</td> </tr> </tfoot> </table>

JSFiddle： https://jsfiddle.net/gfqrL8n0/

Answer 2

我认为获得所需间隙的唯一方法是将tbody单元格内容包装在一个范围内

＆＃13;

* {
  box-sizing: border-box;
}
td:nth-child(2),
td:nth-child(3) {
  background-color: #c0c0c0;
}

table {
  border-spacing:6px 0;  /* gap between columns */
}

td {
  padding: 3px 0;       /* gap between rows */
  width: 200px;
}
thead td,
tfoot td {
  padding:3px;         /* match padding of span */
}

tbody td > span {
  padding:3px;        
  position:relative;
  display:block;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

tbody td > span:after {           /* border gap filler */
  content:'';
  display:block; 
  position:absolute; 
  left:100%;
  top:-1px;
  bottom:-1px;
  width:6px;                             /* match border spacing size */
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

tbody td:first-child > span {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border-left: 1px solid black;
}

tbody td:last-child > span {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-right: 1px solid black;
}

tbody td:last-child > span:after {
  display:none;
}

＆＃13;

<table id="a">
  <thead>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span>normal</span></td>
      <td><span>grey</span></td>
      <td><span>grey</span></td>
      <td><span>normal</span></td>
    </tr>
    <tr>
      <td><span>normal</span></td>
      <td><span>grey</span></td>
      <td><span>grey</span></td>
      <td><span>normal</span></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
  </tfoot>
</table>

＆＃13;

将伪元素用于边框而不是跨度

＆＃13;

* {
  box-sizing: border-box;
}
td:nth-child(2),
td:nth-child(3) {
  background-color: #c0c0c0;
}

table {
  border-spacing:6px 0;  /* gap between columns */
}

td {
  width: 200px;
}
thead td,
tfoot td {
  padding:3px;         /* match padding of span */
}

tbody td {
  padding: 6px 3px;       /* 6px is so that we have vertical padding */
  position: relative;
}

tbody td:after {           /* borders */
  content:'';
  display:block; 
  position:absolute; 
  left:0;
  right: -6px;              /* match border spacing size */
  top:3px;                  /* half the vertical padding */
  bottom:3px;             
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

tbody td:first-child:after {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border-left: 1px solid black;
}

tbody td:last-child:after {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-right: 1px solid black;
  right: -3px;                     /* not sure if you want this to poke out the end of the table */
}

＆＃13;

<table id="a">
  <thead>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
  </tfoot>
</table>

＆＃13;

Answer 3

检查此CSS：

* {
        box-sizing: border-box;
    }

    table#a {
        border-spacing: 5px, 0;
    }

    table#b {
        border-collapse: collapse;
    }

    td {
        background-color: #c0c0c0;
        border-right: 5px solid #FFFFFF;
    }

    td:nth-child(1) {
        background-color: #ffffff;
    }

    tbody tr {
        margin: 5px;
    }

    td {
        display: inline-block;
        padding: 3px;
        width: 200px;
    }

    tbody td {
        border-top: 1px solid black;
        border-bottom: 1px solid black;
    }

    tbody td:first-of-type {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        border-left: 1px solid black;
    }

    tbody td:last-of-type {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        border-right: 1px solid black;
    }

检查图片摘要

在HTML表格中使用CSS进行交叉绑定

3 个答案: