HTML 表格显示不一致答案

【问题标题】：HTML tables not displaying consistentlyHTML 表格显示不一致
【发布时间】：2016-09-30 00:01:01
【问题描述】：

<table cellspacing="0" cellpadding="0">

<textarea rows="5" cols="60" name="question"></textarea>

<tr>
 <td><input type="text" readonly="1" value="127.0.0.1" /></td>
 <td><input type="submit" value="Skicka" /></td>
</tr>
</table>

等于

我怎样才能使提交按钮停留在我想要的位置（看图片）。如果我弄乱了表格的宽度，它在 Firefox 和 IE 中会完全不同。

【问题讨论】：

标签： html html-table

【解决方案1】：

将<textarea> 放入表格单元格中：

<table cellspacing="0" cellpadding="0">
<tr><td colspan="2">
    <textarea rows="5" cols="60" name="question"></textarea>
 </td><tr>
 <td><input type="text" readonly="1" value="127.0.0.1" /></td>
 <td><input type="submit" value="Skicka" /></td>
</tr>
</table>

【讨论】：

【解决方案2】：

像这样创建你的表：

<table cellspacing="0" cellpadding="0">
<tr>
<td colspan="2">
<textarea rows="5" cols="60" name="question"></textarea>
</td>
</tr>
<tr>
 <td><input type="text" readonly="1" value="127.0.0.1" /></td>
 <td align="right"><input type="submit" value="Skicka" /></td>
</tr>
</table>

注意第一个和最后一个 td 元素的 colspan="2" 和 align="right" 属性。我也将 textarea 移到了 td 中。

【讨论】：

感谢 Canavar - 由于某种原因 jQuery 没有在 SO 上为我下载，所以我无法点击“代码”按钮。在我回来修复它之前，你编辑了它。我去 JQuery.com 把它放在我的缓存中。
只是对版主的评论：请注意，该用户并没有真正回答问题 - 答案首先出现在由另一个用户提供的编辑中。对此可能有一个很好的解释，但对我来说它看起来有点可疑......
Tomas，查看此答案第一个版本的源代码 - 答案就在那里，但由于某种原因没有显示在页面上。

【解决方案3】：

您的文本区域不在单元格中。它在行之间，难怪它搞砸了:)

试试：

<table cellspacing="0" cellpadding="0">
<tr>
    <td colspan="2"><textarea rows="5" cols="60" name="question"></textarea>
</tr>

<tr>
 <td><input type="text" readonly="1" value="127.0.0.1" /></td>
 <td><input type="submit" value="Skicka" /></td>
</tr>
</table>

【讨论】：

【解决方案4】：

您需要将该 textarea 放入 colspan="2" 的表格单元格中以获得所需的效果。

如果您为此使用 CSS 而不是表格，则可以加分；）

【讨论】：

【解决方案5】：

您的文本区域也需要位于表格行中。未测试，但试试这个：

<table cellspacing="0" cellpadding="0">
 <tr>
  <td colspan="2">
   <textarea rows="5" cols="60" name="question"></textarea>
  </td>
 </tr>
 <tr> 
  <td>
   <input type="text" readonly="1" value="127.0.0.1" />
  </td>
  <td>
   <input type="submit" value="Skicka" />
  </td>
 </tr>
</table>

【讨论】：

【解决方案6】：

我不确定，但首先尝试将 textarea 放在一个单元格中，如下所示：

<tr>
<td colspan="2">
<textarea>Stuff</textarea>
</td>
</tr>

【讨论】：