HTML表格'；s TD未对齐顶部

我只是尝试一个简单的表格格式，但它一直让我头痛

桌子有一个固定的高度，物品应该与顶部对齐。如果有多余的空间，请在下方使用空白

现行代码

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

Sim卡：
电话号码
4G
55555555
对
66666666
对
77777777
不

编辑：

我想我之前不清楚我想要什么，我想要的不仅仅是TD验证top，而是整个单元格验证到桌面，而不是每个单元格都具有桌面的平均高度

<tr>
    <td colspan="2">
        &nbsp;
    </td>
</tr>

---

您需要将垂直对齐值应用于

元素

td {
    vertical-align: top;
}

还注意到您应该在第一个

中的唯一

上添加

colspan

更新的演示

编辑2:

还指出了使用伪元素创建空白空间的更好方法，因此不需要触摸标记。

table:after {
    content: '';
    display: table-row;
    height: 100px;
}

---

此处演示默认情况下不继承中的垂直对齐CSS属性。将

vertical align:top

属性直接应用于

td

元素

这是正确的方法

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

Sim卡：
电话号码
4G
55555555
对
66666666
对
77777777
不

这是一个供你使用的小提琴演示。只需复制并粘贴演示css和html

---

我还不能发表评论，所以我必须这样做

---

你给了你的桌子一个固定的高度，这正是你想要移除的东西的原因。行的自动计算高度。如果我是你，我会去掉桌子的高度，在桌子周围放一个固定高度的div，给你你想要的边框。

这看起来就像你在第二张图片中想要的那样：

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

Sim卡：
电话号码
4G
55555555
对
66666666
对
77777777
不

---

您也可以重置tr显示，除非您需要进行一些colspan调整

tr{
显示：表格；
宽度：100%；
表布局：固定；
}

Sim卡：
电话号码
4G
55555555
对
66666666
对
77777777
不
添加更多内容和行，以使表在到达底部后自行增长

为什么不试试呢？你是在要求顶部对齐。还是你想要更少的空间？可能是一个带有边距的嵌套表，在主表下创建的填充为0px，如果它对您有帮助，将有一个单一的接受答案，或者赏金将被浪费（您仍然会失去它），它看起来与我的计算机中的图像相同，或者如果您将follow style=“top:0；vertical align:top；”设置为每个TD如果你解释了你的代码是如何工作的以及为什么它会回答这个问题，这个答案会更有用。行高是第一行和第二行之间的间距。减少的越多，打印的行就越近。从中了解有关使用css设置表格样式的更多信息

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

td {
    vertical-align: top;
    line-height: 2.0 !important
    }