Question

这是示例代码：

＆＃13;

<table>
      <tr>
       <td>
         Distrubed td element number 1
       </td>
       <td>
         Distrubed td element number 2
       </td>
       <td>
         Distrubed td element number 3
       </td>
      </tr>
      <tr>
       <td colspan="3"> // sorry forgot to type
        <form method="post">
         <textarea>The one who causing disturbance</textarea>
          <button>Sample</button>
        </form>
       </td>
      </tr>
    </table>

＆＃13;

问题是每当我调整textarea element时，所述td元素也会调整。虽然我的代码还没有css。我只是想知道这是什么原因。无论是bug还是编码本身。谢谢！

Answer 1

最好为文字区域指定 cols 。这将解决您的问题。

e.g;

<textarea cols="20">The one who causing disturbance</textarea>

Answer 2

这可能不是最佳解决方案，但您始终可以使用(x + (n-1)) & -2^m容器上的position: absolute;从页面流中删除textarea / button元素。您还错过了td元素3上的结束标记。

此方法的问题在于，如果div和textarea下方还有其他元素，则它们将直接显示在下方。但是，您可以通过放置一个具有固定高度的元素来将内容向下推过该区域来解决此问题。

JSFiddle

HTML：

button

CSS：

<table>
<tr>
  <td>
    Distrubed td element number 1
  </td>
  <td>
    Distrubed td element number 2
  </td>
  <td>
    Distrubed td element number 3
  </td>
</tr>
<tr>
  <td colspan="3"> // sorry forgot to type
    <form method="post">
      <div>
        <textarea>The one who causing disturbance</textarea>
        <button>Sample</button>
      </div>
    </form>
  </td>
</tr>
</table>

Answer 3

它既不是编码中的错误也不是问题。它是这样设计的，如果你增加一行的宽度，它将增加表格的宽度，其他行将受到影响（将自己拉伸以调整表格的宽度）。

要查看此内容，请max-width添加td textarea

这将一直有效，直到您指定任何宽度

注意：添加max-width仅用于解释。它会阻止拉伸，但它不是一个好的解决方案，因为text-area可能超出td并且可能会导致页面中其他元素出现问题

我的textarea扰乱了我表中的其他td元素

3 个答案: