CSS 行与行之间的间距答案

【问题标题】：CSS Space between rows separated by a lineCSS 行与行之间的间距
【发布时间】：2011-04-25 11:22:16
【问题描述】：

我在这里发现了一个类似的问题

但我没有想象出答案，而且每个答案都不一样，听起来好像没有达成一致

我正在动态显示一个表格，只需要调整 CSS 以便行之间有空间，由一行分隔，仅此而已。我不希望这些行看起来相互挤压。他们说的是填充细胞。我将 cellpadding 硬编码到 html 表中，但它没有任何效果。唯一真正改变外观的是单元格间距，但它的光学效果很差。

我不明白他们如何在下面写下答案，因为他们使用了这么多大括号，据我所知，您在 CSS 文件中创建了一个以“。”开头的类。和 2 个大括号，把所有的东西都放进去，但他们写的是这样的：

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

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

但是他们开始时没有声明类，当他们在中间时，他们为 tr 创建类。我不明白。

有谁知道如何以正确的方式放置代码？

【问题讨论】：

当边框不可见时，我使用行高。

标签： css

【解决方案1】：

您可以尝试这样的方式让您的 CSS 让行间距良好，并由水平线分隔：

table {
    border-collapse: collapse; 
}

td {
    padding: 10px 0;     /* 10px top & bottom padding, 0px left & right */
    border-width: 1px 0; /*  1px top & bottom border,  0px left & right */
    border-color: #000;
    border-style: solid;
}

每行上下都有一个边框，单元格内容上下各有 10 个像素的间距。

如果您不想在表格的顶部和底部设置边框，您可以稍微修改一下 CSS：

table {
    border-collapse: collapse;
}

td {
    padding: 10px 0; /* 10px top & bottom padding, 0px left & right */
}

.separating_line {
    border-top: 1px #000 solid; /* top border only */
}

然后将除第一行之外的所有行赋予 .separating_line 类，如下所示：

<table>
    <tr>
        <td>content</td>
    </tr>
    <tr class="separating_line">
        <td>content</td>
    </tr>
    <tr class="separating_line">
        <td>content</td>
    </tr>
</table>

我写的 CSS 可以像你原来的帖子一样重写：

tr.separating_line {
    border-top: 1px #000 solid; /* top border only */
}

这样这种样式只会应用到具有分界线类的 tr 元素，如果您想使用分界线类以不同方式设置不同元素的样式，这可能会很有用。

tr.separating_line {
    border-top: 1px #000 solid; /* top border only */
}
div.separating_line {
    border-top: 3px #F00 dashed;
}

如果我误解了您的问题，我深表歉意，但希望我的回答对您有所帮助。 =)

【讨论】：

您好，感谢一兆。我希望你能看到你的两行代码对我的桌子产生的显着影响。我正在动态显示它们，但它们通过 JQUERY 插件进行了排序、格式化、搜索过滤等。该插件也在 JQUERY 的 UI TABS 中，到目前为止，格式在流动布局中都很好。由于分辨率问题，我不得不将它嵌入到另一个布局中，所以这张桌子是一场灾难。我不停地挣扎了18小时的一天。我终于添加了你的那几行代码，表格看起来很棒，所有细节都完美无缺！
所以，如果你的贡献的价值应该以它对我的展示产生的积极影响来衡量，那么你应该得到最高的最大值。在插入您的代码之前，显示简直无法呈现，我无法上传它，您可以想象当您拥有 500 行 Jquery、Ajax、Json 代码以及来自 CSS 构建器的大约 100 行代码时会变得多么复杂。不可能找出为什么整个东西都坏了。我添加了你的两行，Deus ex Machina 解决了所有问题，就好像用一个巫师吧。再次感谢。

【解决方案2】：

在这种情况下 tr.classname 意味着每个带有 class="classname" 的 tr elment 都将继承 CSS

喜欢

a.info { }

适用于 class="info" 的所有链接

【讨论】：