仅将边框间距应用于表主体行

问题描述

我有一个包含2个标题行和多个正文行的表.我希望正文中各行之间的间距为10像素.我可以通过以下方式实现这一点:

I have a table with 2 header rows and multiple body rows. I want the spacing between rows in the body to be 10 pixels. I achieve this with:

border-collapse: separate;
border-spacing: 10px;

但是，这显然也适用于标题中的行.但是对于标题，我希望行之间没有空间.我的HTML是:

However, this also obviously applies to the rows in the header. But for the header, I want there to be no space between the rows. My HTML is:

table td {
  background-color: lime;
  padding: 12px 12px 12px 12px;
}
table th {
  background-color: red;
  padding: 12px 12px 12px 12px;
}
table {
  border-collapse: separate;
  border-spacing: 10px;
}

<table>
  <thead>
    <tr>
      <th>head 1</th>
      <th>head 1</th>
      <th>head 1</th>
    </tr>
    <tr>
      <th>head 2</th>
      <th>head 2</th>
      <th>head 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  </tbody>
</table>

小提琴位于此处.我希望在第一个标题行的底部和第二个标题行的顶部之间没有空格.我试过仅将 border-spacing 应用于主体，但它仅在表级别有效.有什么想法吗?

The fiddle is here. I want there to be no space between the bottom of the first header row and top of second header row. I've tried applying border-spacing just to the body but it only works at table level. Any ideas?

推荐答案

作为旧问题，但有多余之处，

您可以使用 transform ， box-shadow 或 position 伪装成两行(或更多):

you may use transform, box-shadow or position to fake collapsing in between 2 rows (or more ):

• transform:

table td {
  background-color: lime;
  padding: 12px 12px 12px 12px;
}

table th {
  background-color: red;
  padding: 12px 12px 12px 12px;
}

table {
  border-collapse: separate;
  border-spacing: 10px;
}

thead tr:first-of-type {
  transform: translatey(10px)
}

<table>
  <thead>
    <tr>
      <th>head 1</th>
      <th>head 1</th>
      <th>head 1</th>
    </tr>
    <tr>
      <th>head 2</th>
      <th>head 2</th>
      <th>head 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  </tbody>
</table>

• 位置:

table td {
  background-color: lime;
  padding: 12px 12px 12px 12px;
}

table th {
  background-color: red;
  padding: 12px 12px 12px 12px;
}

table {
  border-collapse: separate;
  border-spacing: 10px;
}

thead tr:first-of-type {
  position:relative;
  top:10px
}

<table>
  <thead>
    <tr>
      <th>head 1</th>
      <th>head 1</th>
      <th>head 1</th>
    </tr>
    <tr>
      <th>head 2</th>
      <th>head 2</th>
      <th>head 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  </tbody>
</table>

• box-shadow:

table td {
  background-color: lime;
  padding: 12px 12px 12px 12px;
}

table th {
  background-color: red;
  padding: 12px 12px 12px 12px;
}

table {
  border-collapse: separate;
  border-spacing: 10px;
}

thead tr:first-of-type th {
  box-shadow:0 10px red
}

<table>
  <thead>
    <tr>
      <th>head 1</th>
      <th>head 1</th>
      <th>head 1</th>
    </tr>
    <tr>
      <th>head 2</th>
      <th>head 2</th>
      <th>head 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  </tbody>
</table>

这篇关于仅将边框间距应用于表主体行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！