CODEWITHSUNDEEP
htmlcss
s1n7ax
s1n7ax

Reputation: 3069

How to align elements in the second `<td>` to top left when first `<td>`'s height is greater than second `<td>`

when the height of the first <td>is greater than the second <td>, contain text of second <td> is aligned to center. I want that text or elements of the second <td> to be aligned to top left when the first <td>'s height is greater than second.

How can i do it using css?

<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
  <table border="1">
    <tr>
      <td>
        <div style="background-color:red;width:100px;height:200px">some text1</div>
      </td>
      <td>
        some text2
      </td>
    </tr>
  </table>
</body>
</html>

Upvotes: 1

Views: 2987

Answers (2)

takeradi
takeradi

Reputation: 3871

Apply vertical-align: top to the td tag if you want to align text in all td elements to top.

If you just want to align the text in the second element use

table tr td:nth-child(2) instead of table tr td. nth-child applies the rule only to the 2nd td element.

Read more over here: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

table tr td{ 
  background-color:red;
  width:100px;
  height:200px;
  vertical-align:top
}
<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
  <table border="1">
    <tr>
      <td>
        <div>some text1</div>
      </td>
      <td>
        some text2
      </td>
    </tr>
  </table>
</body>
</html>

Upvotes: 0

Jan Franta
Jan Franta

Reputation: 1721

This should work:

table td:nth-child(2) {
   vertical-align: top;
}

Upvotes: 2

Related Questions