javascript - TEXTAREAでのテーブルの悪い作業でvalignするのはなぜですか?

Question

<table border="1" style="height:200px">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td valign="top">January<textarea></textarea></td>
    <td valign="bottom">$100</td>
  </tr>

</table>

http://jsfiddle.net/BCsN2/

1 月は上部のテキストエリアと同じにする必要があります。どうすれば作れますか？多分jQueryで？

Answer 1

これは、2つのセルに分割することによる最初の解決策です。上記のセルにcolspanを追加することを忘れないでください。

<table border="1" style="height:200px">
  <tr>
    <th colspan="2">Month</th> <!-- add colspan="2" -->
    <th>Savings</th>
  </tr>
  <tr>
    <td valign="top">January</td> <!-- split it to 2 cells (#1) -->
    <td valign="top"><textarea></textarea></td> <!-- split it to 2 cells (#2) -->
    <td valign="bottom">$100</td>
  </tr>
</table>

そして、これはCSSを使用した2番目のソリューションです。

<table border="1" style="height:200px">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td valign="top">
        <span style="float: left">January</span> <!-- wrap it in span and add CSS float -->
        <textarea style="float: left"></textarea> <!-- add CSS float -->
    </td>
    <td valign="bottom">$100</td>
  </tr>
</table>

Answer 2

追加するだけ

textarea { vertical-align: top }

フィドルを参照してください：http://jsfiddle.net/BCsN2/5/属性として使用する
代わりに、スタイルプロパティとして使用しますvalign<td>vertical-align

Answer 3

もう 1 つのネストされたテーブルを使用できます。これはおそらく最も簡単な方法です (JS は必要ありません)。唯一の問題は、ほとんどの場合、このネストされたテーブルに追加の CSS ルール (スタイル) を指定する必要があることです。したがって、親から何も継承しません。

<table border="1" style="height:200px">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td valign="top">
      <table>
        <tr>
          <td valign="middle">January</td>
          <td valign="middle"><textarea></textarea></td>
        </tr>
      </table>
    </td>
    <td valign="bottom">$100</td>
  </tr>    
</table>