Unicode symbol in table cell fails vertical-align of CSS? - html

Question

Every time I have a unicode symbol in one table cell,
vertical-align: middle;
in my CSS stops working. As a result, the text "floats higher" than middle.
Notice how text in the upper row is vertically aligned in the middle, whereas Sun Jun 4 23:52:31 2017 in the lower row floats higher than middle because of the folder unicode symbol.
Relevant part of CSS
table, td, th {
border: 2px solid #D0D0D0;
}
table {
border-collapse: collapse;
}
td {
vertical-align: bottom;
}
Relevant part of HTML
<td>📂 viz_coreOpt_3D<span style="float:right;">  Sun Jun 4 23:52:31 2017</span></td>

Answer 1

The folder icon is the reason that one line in height exceeds the other. I suggest to set the line height not less than the height of the icon.
table, td, th {
border: 2px solid #D0D0D0;
}
table {
border-collapse: collapse;
}
td {
line-height: 1.5em;
vertical-align: bottom;
}
<table>
<tr>
<td>
📂 viz_coreOpt_3D
<span style="float:right;">  Sun Jun 4 23:52:31 2017</span>
</td>
</tr>
</table>

Answer 2

Are you using the tag? You should be as you need to let the table know how to separate your rows.
your table setup in html should look something like this:
<table>
<thead> <!-- this is optional -->
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody> <!-- once again this is optional -->
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
this will give you a table with two rows. One a header row and one a normal row. if you want them to be aligned within the boxes you can center the text with text-align: center; to the middle of the cell width wise and then use vertical-align: middle; to make it align vertically within the cell of the table.
what is causing the problem with your initial solution is the use of float. This will move it to the right and the top of the element because float