html - 如何在表中的行之间添加间距?

标签 html css

我正在尝试像在 linkedin 中那样创建一个“墙”,并且我正在通过创建一个长表来做到这一点。我改变了背景颜色和表格颜色以形成对比。我的问题是我无法分隔表格行以便在它们之间显示背景颜色。

我发现所有的例子都用到了

<table style="border-collapse: separate;border-spacing:0 1rem;">

如何在间距中着色以匹配背景?

或者有更好的方法来解决这个问题吗?

最佳答案

你不能完全按照你想要的方式去做。您的选择是:

  • 向所需行中的每个单元格添加填充:tr.this-one td { padding-bottom: 1em;} .这将使用单元格的背景颜色。

  • 为所需行中的每个单元格添加粗边框:tr.this-one td { border-bottom: 1em solid red;} .这将使用您设置的边框颜色,您可以使它与您拥有的背景颜色相匹配。

  • 在标记中添加一行:<tr><td colspan="10"></td></tr>并按照您喜欢的方式设置样式。你也可以有 <thead>/<tfoot>/multiple <tbody> elements在表格中作为对行进行语义分组的方式(但它们本身不能设置样式)。

关于html - 如何在表中的行之间添加间距?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48868973/

相关文章:

jquery - 提交表单后防止重定向

javascript - 父子组件是按什么顺序渲染的?

Jquery .css() 函数问题与 unicode 字符

html - 固定位置导航栏更换

javascript - Bootstrap 画廊网格

html - 如何在不中断的情况下连续添加 CSS 右边框?

html - 在列表框中创建滚动条

javascript - 这个 JavaScript 的 "rel"应该是什么?

css - Joomla Jform 单选按钮未与其标签水平对齐

javascript - 更改所需表单输入的 CSS 图像位置