HTML Table's TD not aligning top

Question

I am just trying out a simple table format but it's been giving me headache

The table has a fixed height, and the items is supposed to be aligned to the top. With empty spaces below if there is excess space.

Current Code

<table width='100%' height='250px' style='font-family: Arial, Helvetica, sans-serif; font-size: 10pt; border: 1.0pt solid windowtext; vertical-align: top;'>
<tr style='border-bottom: 1.0pt solid windowtext;'>
    <td><b><u>Sim Card :</u></b></td>
</tr>
<tr>
    <td><b>Phone Number</b></td>
    <td><b>4G</b></td>
</tr>
<tr>
    <td>55555555</td>
    <td>YES</td>
</tr>
<tr>
    <td>66666666</td>
    <td>YES</td>
</tr>
<tr>
    <td>77777777</td>
    <td>NO</td>
</tr>
</table>

EDIT:

I think i wasn't clear with what I want earlier, what I want is not just for the TD to valign top, its for the whole cell to be valigned to the top of the table without each of them having the average height of the table.

Answer 1

This looks exactly like you want in your second picture:

<div style='width: 100%; height: 250px; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; border: 1.0pt solid windowtext;'>
    <table width='100%'>
        <tr style='border-bottom: 1.0pt solid windowtext;'>
            <td><b><u>Sim Card:</u></b></td>
        </tr>
        <tr>
            <td><b>Phone Number</b></td>
            <td><b>4G</b></td>
        </tr>
        <tr>
            <td>55555555</td>
            <td>YES</td>
        </tr>
        <tr>
            <td>66666666</td>
            <td>YES</td>
        </tr>
        <tr>
            <td>77777777</td>
            <td>NO</td>
        </tr>
    </table>
</div>

https://jsfiddle.net/83drLumk/2/

Answer 2

You may as well reset tr display unless you have some colspan involved wich might need tuning to be done.

tr{
  display:table;
  width:100%;
  table-layout:fixed;
}

<table width='100%' height='250px' style='font-family: Arial, Helvetica, sans-serif; font-size: 10pt; border: 1.0pt solid windowtext; vertical-align: top;'>
<tr style='border-bottom: 1.0pt solid windowtext;'>
    <td><b><u>Sim Card :</u></b></td>
</tr>
<tr>
    <td><b>Phone Number</b></td>
    <td><b>4G</b></td>
</tr>
<tr>
    <td>55555555</td>
    <td>YES</td>
</tr>
<tr>
    <td>66666666</td>
    <td>YES</td>
</tr>
<tr>
    <td>77777777</td>
    <td>NO</td>
</tr>
  <tr><td style="text-align:center; background:#eee">add more content and rows to let that table grow itself once bottom reached</td></tr>
</table>

Since answer is already given, mind it as an alternative

---

another answers says: add empty elements, wich actually is a good tip too, but via :after it wouldn't bother the markup.

tr {
  height:1%;
  }
table:after {
  content:'';
  display:table-row;
  }

<table width='100%' height='250px' style='font-family: Arial, Helvetica, sans-serif; font-size: 10pt; border: 1.0pt solid windowtext; vertical-align: top;'>
<tr style='border-bottom: 1.0pt solid windowtext;'>
    <td><b><u>Sim Card :</u></b></td>
</tr>
<tr>
    <td><b>Phone Number</b></td>
    <td><b>4G</b></td>
</tr>
<tr>
    <td>55555555</td>
    <td>YES</td>
</tr>
<tr>
    <td>66666666</td>
    <td>YES</td>
</tr>
<tr>
    <td>77777777</td>
    <td>NO</td>
</tr>
</table>