HTML Table TD 未对齐顶部

Question

我只是在尝试一种简单的表格格式，但它一直让我头疼

表格有固定的高度，元素应该与顶部对齐。如果有多余的空间，下面有空格。

当前代码

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

编辑:

我想我之前不清楚我想要什么，我想要的不仅仅是让 TD 对齐顶部，而是让整个单元格对齐到表格的顶部，而不需要每个单元格都具有平均值 table 的高度。

Answer 1

这看起来与您在第二张图片中想要的完全一样:

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