CSS由行分隔的行之间的空格

Question

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

表中两行之间的空格？

但我没有想象答案,每个答案都不同,听起来没有达成协议

我正在动态显示一个表,只需要调整CSS,以便行之间有空格,由一行分隔,就是全部.我不希望行看起来相互挤压.他们所说的是填充细胞.我硬编码到html表中的cellpadding,它没有任何效果.真正改变外观的唯一因素是cellspacing,但光学效果不佳.

我不明白他们如何写下面的答案,因为他们使用了这么多大括号,据我所知,你在CSS文件中创建一个以'.'开头的类.和2个括号并把所有的东西放进去,但他们写道:

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

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

但是他们在没有宣布课程的情况下开始,当他们在中间时,他们为tr创建了一个类.我不明白.

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

Answer 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 */
}

因此,此样式仅应用于具有separation_line类的tr元素,如果您希望使用separation_line类以不同方式设置不同元素的样式,这可能很有用.

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

如果我误解了你的问题,我会道歉,但希望我的回答有所帮助.=)