Vertical Alignment of text in a table cell

Question

Here s a portion of my table  it s a form      Those are just two  lt td gt  s in a  lt tr gt   I m trying to get Description up top  to the top of the table cell  rather than resting on the bottom   How can I do that

User · Answer

Just add vertical-align top for first td alone needed not for all td    x000D   x000D  tr gt td first-child   x000D    vertical-align  top  x000D    x000D   lt tr gt  x000D     lt td gt Description lt  td gt  x000D     lt td gt more text lt  td gt  x000D   lt  tr gt  x000D   x000D   x000D

User · Answer

td description  vertical-align  top     where description is the class name of the td with that text in it   x000D   x000D  td description   x000D    vertical-align  top  x000D    x000D   lt td class  description  gt Description lt  td gt  x000D   x000D   x000D    OR inline  yuk     x000D   x000D   lt td style  vertical-align  top   gt Description lt  td gt  x000D   x000D   x000D

User · Answer

CSS  vertical-align  top   or html Attribute  valign  quot top quot    x000D   x000D   table td    table th       border  1px solid  161b21      text-align  left      padding  8px      width  250px      height  100px              style for table        table-body-text     vertical-align  top    x000D   lt table class  table  gt       lt tr gt         lt th valign  top  gt Title 1 lt  th gt         lt th valign  top  gt Title 2 lt  th gt       lt  tr gt       lt tr gt         lt td class  table-body-text  gt text lt  td gt         lt td class  table-body-text  gt text lt  td gt       lt  tr gt      lt  table gt  x000D   x000D   x000D   For table vertical-align we have 2 options   is to use css  vertical-align  top       another way is to user attribute  quot valign quot  and the property should be  quot top quot   valign  quot top quot

User · Answer

Try    x000D   x000D  td description   x000D    line-height  15px x000D    x000D   lt td class  description  gt Description lt  td gt  x000D   x000D   x000D    Set the line-height value to the desired value

User · Answer

I had the same issue but solved it by using  important  I forgot about the inheritance in CSS  Just a tip to check first

User · Answer

If you are using Bootstrap  please add the following customised style setting for your table    table gt tbody gt tr gt td    table gt tbody gt tr gt th    table gt tfoot gt tr gt td    table gt tfoot gt tr gt th    table gt thead gt tr gt td    table gt thead gt tr gt th         vertical-align  middle

User · Answer

valign  top  should do the work    x000D   x000D   lt tr gt  x000D     lt td valign  top  gt Description lt  td gt  x000D   lt  tr gt  x000D   x000D   x000D

[html] Vertical Alignment of text in a table cell

Examples related to html

Examples related to css