HTML table cell resizes when a content is resizing - html

Question

Here's the jsFiddle.
Here's the code :
<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>
The css :
table, td
{
border:1px solid black;
}
table
{
height:400px;
width:400px;
table-layout:fixed;
}
#td01, #td00
{
height:100%;
}
When I am changing the textarea inside cell with row = 0 and col = 0 the cell with row = 1 and col 1 is changing too.
I need fixing size of cells.

Answer 1

This is not perfect, but i think it will do what you want, you have to set an fixed position to the td and a fixed height so i don't know if you'r ok with that for your project.
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;
}
EXAMPLE: FIDDLE