表中两行之间的空格？

时间 2019-12-23

标签表中两行之间空格繁體版

原文原文链接

这可能经过CSS吗？ css

我尝试着 html

tr.classname {
  border-spacing: 5em;
}

无济于事。也许我作错了什么？浏览器

#1楼

为表提供间距的正确方法是使用cellpadding和cellspacing例如spa

<table cellpadding="4">

#2楼

你须要设置border-collapse: separate; 在桌子上; 大多数浏览器默认样式表从border-collapse: collapse;开始border-collapse: collapse; ，边沟间隔。 code

另外，边界间距：在TD而不是TR 。 htm

尝试： ci

<html><head><style type="text/css">
    #ex    { border-collapse: separate; }
    #ex td { border-spacing: 1em; }
</style></head><body>
    <table id="ex"><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>
</body>

#3楼

要建立行间距的错觉，请将背景颜色应用于行，而后建立一个白色的粗边框，以便建立“空格”:) it

tr 
{
   background-color: #FFD700;
   border: 10px solid white;
}

#4楼

来不及答案:) table

若是将float应用于tr元素，则能够在具备margin属性的两行之间tr空格。 class

table tr{
float: left
width: 100%;
}

tr.classname {
margin-bottom:5px;
}

#5楼

我在遇到相似问题时偶然发现了这一点。我发现Varun Natraaj的答案很是有帮助，但我会使用透明边框代替。

td { border: 1em solid transparent; }

透明边框仍然有宽度。