html - 在 HTML 表格中使用 CSS 交叉

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/