HTML 表格单元格在内容调整大小时调整大小答案

【问题标题】：HTML table cell resizes when a content is resizingHTML 表格单元格在内容调整大小时调整大小
【发布时间】：2013-05-26 00:57:49
【问题描述】：

这是jsFiddle.

代码如下：

<table>
  <tr>
    <td id="td00" rowspan="2">
        <textarea>A very1 </textarea>
    </td>
    <td id="td01"> 
        <textarea>A very2 </textarea>
    </td>        
  </tr>
  <tr>
    <!--td>
        <textarea>A very3 </textarea>
    </td-->
    <td>
        <textarea>A very4 </textarea>
    </td>        
  </tr>
</table>

CSS：

table, td
{ 
  border:1px solid black;  
}

table 
{
  height:400px;
  width:400px;
  table-layout:fixed;
}
#td01, #td00 
{
  height:100%;
}

当我更改 row = 0 和 col = 0 的单元格内的 textarea 时，row = 1 和 col 1 的单元格也会发生变化。

我需要固定单元格的大小。

【问题讨论】：

为什么不给 tds 一个大小呢？例如td {width:50%;}
如果您设置textarea{resize: none}，则单元格将永远不会调整大小。这是快速而肮脏的方式。

标签： html html-table cell

【解决方案1】：

这并不完美，但我认为它会做你想做的事，你必须为 td 设置一个固定位置和一个固定高度，所以我不知道你是否同意你的项目。

HTML：

<table>
    <tr>
        <td id="td00" rowspan="2">
            <textarea>A very1 </textarea>
        </td>
        <td id="td01"> 
            <textarea>A very2 </textarea>
        </td>        
    </tr>
    <tr style="position:fixed;">
        <!--td>
            <textarea>A very3 </textarea>
        </td-->
        <td >
            <textarea>A very4 </textarea>
        </td>        
    </tr>
</table>

CSS：

   table, td{ 
    border:1px solid black;  
}

table {
    height:400px;
    width:400px;
    table-layout:fixed;
}
#td01
{
    height:320px;
}

示例：FIDDLE

【讨论】：