首页 > web前端 > css教程 > 如何使用 CSS 在表格行之间添加空格?

如何使用 CSS 在表格行之间添加空格?

Mary-Kate Olsen
发布: 2024-11-10 06:30:02
原创
924 人浏览过

How to Add Space Between Table Rows with CSS?

如何在表格行之间创建空间

可以使用 td 元素上的 padding 属性来实现分隔表格行。要提供所需的间距,请使用以下 CSS:

/* Apply padding to td elements that are direct children of tr elements with class spaceUnder. */
tr.spaceUnder > td {
  padding-bottom: 1em;
}
登录后复制

此代码确保填充仅应用于从类 spaceUnder 的 tr 元素直接派生的 td 元素。这允许嵌套表格。

为了进行演示,请考虑下表:

<table>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
    </tr>
    <tr class="spaceUnder">
      <td>C</td>
      <td>D</td>
    </tr>
    <tr>
      <td>E</td>
      <td>F</td>
    </tr>
  </tbody>
</table>
登录后复制

使用提供的 CSS,CD 行下方将有一个空格,而 AB 行和 EF 行不受影响.

以上是如何使用 CSS 在表格行之间添加空格?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板