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月应与顶级textarea同等。我该怎么做？也许用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>

为什么表格不好用TEXTAREA？

3 个答案: