CODEWITHSUNDEEP
htmlcss
MaVRoSCy
MaVRoSCy

Reputation: 17839

vertical-align:top not working in td with multiple elements

I have this 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>

The problem is that i cant display the contents of second td vertically aligned top.

I saw also other answers that use the property display: table-cell; but doesn't seem to work.

Any ideas on how to do this?

Upvotes: 2

Views: 1146

Answers (3)

Nima Derakhshanjan
Nima Derakhshanjan

Reputation: 1404

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

used html divs around contents,have a look at updated link please,hope it helps

Upvotes: 1

GIPSSTAR
GIPSSTAR

Reputation: 2100

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

Upvotes: 0

Alex Char
Alex Char

Reputation: 33218

You have a typo is vertical-align not vetical-align:top(also please avoid using inline styles):

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

Upvotes: 7

Related Questions