How to prevent too high <td> level?

Question

It must be something stupid, but I still can't figure it out ...

Here is my HTML:

<table cellspacing="0" cellpadding="0" border="0">
<tr>
    <td style="height: 8px"><img src="/media/note2.png" width="8" height="8" border="0"></td>
    <td style="height: 8px"></td>
    <td style="height: 8px"><img src="/media/note1.png" width="8" height="8" border="0"></td>
</tr>
<tr>
    <td class="NoteCell"></td>
    <td class="NoteCell">{{ text }}</td>
    <td class="NoteCell"></td>
</tr>
<tr>
    <td style="height: 8px"><img src="/media/note4.png" width="8" height="8" border="0"></td>
    <td style="height: 8px"></td>
    <td style="height: 8px"><img src="/media/note3.png" width="8" height="8" border="0"></td>
</tr>

I expect the first and third lines to have a height of 8 pixels, but for some reason they are much higher (as if there was text inside, but no text!)

puzzled ... Any help would be appreciated!

Answer 1

Try td img { display: block; }

Answer 2

The reason that the second columns of the first and third rows determine the minimum height.

Note that all columns in a row will have the same height, and all rows in a column will have the same width.

The way tables are displayed.

So, you have to write in addition:

td { fontsize: 8px; }

Answer 3

1. html , , , .

Tip 2. Use a browser extension with CSS debugging features, check and script using css that applies to your table rows, cells, and cell images.

Tip 3. You can try if one of them helps, adding them all:

table {border-collapse:collapse;table-layout:fixed}
td,tr {padding:0}
td img {margin:0;height:8px}

If this helps, it means that other definitions in your stylesheet make the cells or lines higher. By deleting my css suggestions one by one, you can find out what causes it.

Answer 4

I had a similar problem and it vertical-align:top;helped.