HTML表的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进入顶部，而是将整个单元格调整到桌面顶部而不是每个都有平均值桌子的高度。

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/

Answer 2

你也可以重置tr显示，除非你有一些可能需要调整的colspan。

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>

由于已经给出答案，请将其视为替代

---

另一个答案说：添加空元素，实际上也是一个很好的提示，但是通过：它不会打扰标记。

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>

Answer 3

您需要将垂直对齐值应用于<td>元素

td {
    vertical-align: top;
}

另请注意，您应该只在colspan上添加<td>，在第一个<tr>

<td colspan="2" style='vertical-align: top;'>
    <b><u>Sim Card :</u></b>
</td>

修改

刚刚看到你更新了问题。您可以创建一些空单元格，并在表格结尾之前添加它们。同时删除表格中的height值。

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

更新了演示http://jsfiddle.net/q8e78cL0/

编辑2：

@GCyrillus还指出了使用伪元素创建空白区域的更好方法，因此无需触摸标记。

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

在这里演示http://jsfiddle.net/q8e78cL0/2/

Answer 4

默认情况下不继承vertical-align CSS属性。直接将vertical-align: top属性应用于td元素。

Answer 5

这是正确的方法

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

这是一个适合你的演示小提琴。只需复制并粘贴demo css和html

即可

https://jsfiddle.net/wgrLfxg3/13/

Answer 6

我无法评论，所以我必须这样做。

你给你的桌子一个固定的高度，这正是导致你想要删除的东西的原因。自动计算行的高度。如果我是你，我会删除那个桌子的高度并在桌子周围放一个固定高度的div来给你你想要的边框。

Answer 7

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