[html] Setting table row height

I have this code:

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

The rows are spaced too far apart. I want the lines closer together.

What I did was to add the following CSS but it doesn't seem to change anything.

.topics tr { height: 14px; }

What am I doing wrong?

once I need to fix the height of a particular valued row by using inline CSS as following..

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

As for me I decided to use paddings. It is not exactly what you need, but may be useful in some cases.

table td {
    padding: 15px 0;
}

line-height only works when it is larger then the current height of the content of <td> . So, if you have a 50x50 icon in the table, the tr line-height will not make a row smaller than 50px (+ padding).

Since you've already set the padding to 0 it must be something else,
for example a large font-size inside td that is larger than your 14px.

You can remove some extra spacing as well if you place a border-collapse: collapse; CSS statement on your table.

If you are using Bootstrap, look at padding of your tds.

try setting the attribute for td so:

.topic td{ height: 14px };

I found the best answer for my purposes was to use:

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

The white-space: nowrap is important as it prevents your row's cells from breaking across multiple lines.

I personally like to add text-overflow: ellipsis to my th and td elements to make the overflowing text look nicer by adding the trailing fullstops, for example Too long gets dots...