Question

我有这个html（fiddle）：

<table>
    <tr>
        <td colspan="1" style="vertical-align:top"> <span class="" title="">Add new Comment:</span>
        </td>
        <td colspan="1" style="height:80px;vertical-align:top;">
                 text
                <textarea id="" class="" style="height:52px;vetical-align:top;"></textarea>
                 Person:
                <input id="" class="" type="text" value="" style="vetical-align:top;"/>&nbsp;
                <button class="" style="width:90px;vetical-align:top;" onclick="">Insert</button>
        </td>
    </tr>
</table>

问题是我无法显示第二个td垂直对齐顶部的内容。

我还看到了使用属性display: table-cell;的其他答案，但似乎没有效果。

关于如何做到这一点的任何想法？

Answer 1

您输错了vertical-align而非vetical-align:top（同时请避免使用内联样式）：

＆＃13;

<table>
  <tr>
    <td colspan="1" style="vertical-align:top"> <span class="" title="">Add new Comment:</span>
    </td>
    <td colspan="1" style="height:80px;vertical-align:top;">
      text
      <textarea id="" class="" style="height:52px;vertical-align:top;"></textarea>
      Person:
      <input id="" class="" type="text" value="" style="vertical-align:top;" />&nbsp;
      <button class="" style="width:90px;vertical-align:top;" onclick="">Insert</button>
    </td>
  </tr>
</table>

＆＃13;

Answer 2

<table>
    <tr>
        <td colspan="1" style="vertical-align: top"><span class="" title="">Add new Comment:</span>
        </td>
        <td colspan="1" style="height: 80px; vertical-align: top;">
            <div>text</div>
            <div>
                <textarea id="" class="" style="height: 52px; vetical-align: top;"></textarea></div>
            <div>Person:</div>
            <div>
                <input id="Text1" class="" type="text" value="" style="vetical-align: top;" /></div>
            <div>
                <button class="" style="width: 90px; vetical-align: top;" onclick="">Insert</button></div>
        </td>
    </tr>
</table>

在内容周围使用了html div，请查看updated link，希望有所帮助

Answer 3

<table cellpadding="0" cellspacing="0" border="0">
    <tr valign="top">
        <td colspan="1" valign="top"> <span class="" title="">Add new Comment:</span>
        </td>
        <td colspan="1" valign="top">
                <table cellpadding="0" cellspacing="5" border="0">
                    <tr valign="top">
                        <td>Text:</td>
                        <td><textarea id="" class="" style="height:52px;vetical-align:top;"></textarea></td>
                        <td>Person:</td>
                        <td><input id="" class="" type="text" value="" style="vetical-align:top;"/></td>
                        <td><button class="" style="width:90px;vetical-align:top;" onclick="">Insert</button></td>
                    </tr>
                </table>                
        </td>
    </tr>
</table>

vertical-align：top在td中不能使用多个元素

3 个答案: