javascript - 为什么表格中的 valign 与 TEXTAREA 一起使用不好？

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/

一月应该与顶部文本区域相同。我怎样才能做到？也许用 jQuery？

Answer 1

只需添加

textarea { vertical-align: top }

见小提琴： http: //jsfiddle.net/BCsN2/5/
而不是valign用作<td>属性，而是vertical-align用作样式属性

Answer 2

您可以再使用一个嵌套表。这可能是最简单的方法（不需要 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>

Answer 3

这是第一个解决方案，将其拆分为 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：

<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>