テーブルの行の高さを設定する

私はこのコードを持っています：

<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それは複数行に渡って破壊からあなたの行のセルを防ぐように重要です。

I personnally追加したいtext-overflow: ellipsis私にthとtd末尾のfullstopsを追加することによって、あふれたテキストの外観のよりよいを作るための要素、例えばToo long gets dots...

line-heightは、のコンテンツの現在の高さよりも大きい場合にのみ機能し<td>ます。したがって、表に50x50のアイコンがある場合、tr行の高さは行を50px（+パディング）より小さくしません。

既にパディングを設定しているため、別のパディングに0する必要があります。
たとえば、td14pxよりも大きい内部の大きなfont-sizeなどです。

Bootstrapを使用している場合は、を見てpaddingくださいtd。

次のようにインラインCSSを使用して、特定の値の行の高さを修正する必要があります。

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

私はパディングを使うことにしました。必要なものではありませんが、場合によっては役立つことがあります。

table td {
    padding: 15px 0;
}