设置表格行高

我有以下代码：

<table class="topics" >
    <tr>
        <td style="white-space: nowrap; padding: 0 5px 0 0; color:#3A5572; font-weight: bold;">Test</td>
        <td style="padding: 0 4px 0 0;">1.0</td>
        <td>abc</td>
    </tr>
    <tr>

        <td style="white-space: nowrap; padding: 0 5px 0 0; color:#3A5572; font-weight: bold;">test2</td>
        <td style="padding: 0 4px 0 0;">1.3</td>
        <td>def</td>
    </tr>
</table>

行之间的距离太远。我希望线条更紧密。

我所做的是添加以下CSS，但似乎没有任何改变。

.topics tr { height: 14px; }

我究竟做错了什么？

试试这个：

.topics tr { line-height: 14px; }

尝试为此设置属性td ：

.topic td{ height: 14px };

如果border-collapse: collapse;在表上放置CSS语句，则也可以删除一些额外的间距。

我发现针对我的目的的最佳答案是使用：

.topics tr { 
    overflow: hidden;
    height: 14px;
    white-space: nowrap;
}

的 white-space: nowrap很重要，因为它可以防止行的单元格跨越多行。

我个人喜欢添加text-overflow: ellipsis到th和td元素中，例如通过添加结尾的句号使溢出的文本看起来更好Too long gets dots...

line-height仅在大于内容的当前高度时才起作用<td>。因此，如果表格中有一个50x50的图标，tr行高不会使行小于50px（+填充）。

由于您已经将填充设置为0其他值，
例如，内部的大字体大小td大于14px。

如果您使用的是Bootstrap，请查看padding您td的。

一旦我需要通过使用内联CSS来固定特定值行的高度，如下所示。

<tr><td colspan="4" style="height: 10px;">xxxyyyzzz</td></tr>

对于我来说，我决定使用填充。这并不是您真正需要的，但是在某些情况下可能会有用。

table td {
    padding: 15px 0;
}