问题:
是否可以在表中的行之间添加空间使用 CSS 的表格?以下代码不会产生所需的结果:
tr.classname { border-spacing: 5em; }
答案:
要在表中的行之间创建空间,您需要在 td 上使用填充元素。您可以使用以下 CSS 代码:
tr.spaceUnder > td { padding-bottom: 1em; }
在此代码中,tr.spaceUnder > td 选择器仅将填充应用于属于 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>
输出:
A | B |
---|---|
C | D |
E | F |
以上是如何使用 CSS 在表中的行之间添加空格?的详细内容。更多信息请关注PHP中文网其他相关文章!