HTML Table different column text not aligned to same line

Question

The text in different 's inside a html table is not aligned on the same line. One of column of this table has multiple lines of text.For example,

Header1|Header2
---------------
       |This is
Ex     |an Example

If the second column has multiple lines of text, then both the column text does not start on the same line which is required. Currently i have not applied any styles to the table/td

Please suggest any solution.

Answer 1

Because the text of the table is aligned to middle by default, you need to set the alignment of the text so that you can achieve what you want. Use vertical-align:top so that even if the 2nd column has multiple lines, both of the text will start at the top of the table.

th,td{
  vertical-align:top;
}

For visualization here is the jsfiddle .