在tr中添加边距而没有边框间距

时间:2019-06-14 09:51:57

标签: html css html-table

我正在使用表格,为了在行之间创建边距,我正在使用border-spacing。现在,新要求是删除某些行之间的边距。

我试图找到一种在tr之间添加边距而没有border-spacing的方法,但是没有。我需要保证金,因为我使用的是背景色和悬停效果,因此行之间必须有一个空格。

// HTML--------------------------------------
<table>
      <thead>
        <tr>
          <th>Lorem ipsum</th><th>Lorem ipsum</th><th>Lorem ipsum</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Some Data</td><td>Some Data</td><td>Some Data</td>
        </tr>
        <tr>
          <td>Some Data</td><td>Some Data</td><td>Some Data</td>
        </tr>
        <tr>
          <td>Some Data</td><td>Some Data</td><td>Some Data</td>
        </tr>
      </tbody>
    </table>
// CSS--------------------------------------
table {
  border-collapse: separate;
  border-spacing: 0 4px;
  tbody {
    tr {
      background-color: lightgrey;
      td {
        padding: 1.0rem;
        }
    }
  }
}

CodePen Link

我想在没有border-spacing的情况下实现此结果,并且我也不能为每一行使用单独的tbody

0 个答案:

没有答案