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;
}

如果我误解了你的问题，我道歉，但希望我的回答有所帮助。 =）

Answer 2

在这种情况下，tr.classname意味着每个具有class =“classname”的trrent将继承CSS

像

a.info { }

适用于所有与class =“info”的链接

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

2 个答案: