CODEWITHSUNDEEP
htmlcss
javaTwilight
javaTwilight

Reputation: 35

How do I change the text align in my html table that has a textarea

In my simple HTML code above is a two column table in HTML with a header row. First is a single line height row. The second line has height of 7 lines. My data is the 2nd row, February column is in the middle of the column with space on top and bottom of the text.

How do I put the text so the text is aligned on the top of the column?

I tried text-align: top, verticle-align: top, and padding-top: 0px, but does not work.

table,
th,
td {
  border: 1px solid black;
}
<table style="width:50%">
  <tr>
    <th style="text-align:center">Month</th>
    <th style="text-align:left">Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td style="text-align: top">February</td>
    <td><textarea name="notes" rows="7" maxlength="3000"></textarea></td>
  </tr>
</table>

Upvotes: 0

Views: 180

Answers (2)

Raydoan Anik
Raydoan Anik

Reputation: 219

Use it instead of text-align:top

vertical-align:text-top

Upvotes: 0

agrm
agrm

Reputation: 3852

How do i put the text so the text is aligned on the top of the column?

You can add vertical-align:top to vertically align the table data like so:

table,
th,
td {
  border: 1px solid black;
  vertical-align: top;
}
<table style="width:50%">
  <tr>
    <th style="text-align:center">Month</th>
    <th style="text-align:left">Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td style="text-align: top">February</td>
    <td><textarea name="notes" rows="7" maxlength="3000"></textarea></td>
  </tr>
</table>

Upvotes: 1

Related Questions