強制表單元格來從其他細胞的最大高度連續

Question

這是我的HTML：

<table> 
    <tbody> 
     <tr> 
      <td><textarea name="" id="" cols="30" rows="10"></textarea></td> 
      <td><textarea name="" id="" cols="30" rows="10"></textarea></td> 
     </tr> 
    </tbody> 
</table> 

的問題是在這fiddle可見。

基本上，當我在一列中調整textarea的大小時，我想讓另一個textarea具有與另一個textarea相同的高度（基本上強制單元格增加高度）。

我想知道是否有只有CSS的方法可用於此。

Answer 1

將min-height: 100%;添加到textarea應該使它的行爲方式與以後相同。

table{ 
 
    border-collapse: collapse; 
 
} 
 
td{ 
 
    border: 3px dashed red; 
 
    padding: 15px; 
 
} 
 

 
textarea{ 
 
    resize: vertical; 
 
    min-height: 100%; 
 
}

<table> 
 
    <tbody> 
 
     <tr> 
 
      <td><textarea name="" id="" cols="30" rows="10"></textarea></td> 
 
      <td><textarea name="" id="" cols="30" rows="10"></textarea></td> 
 
     </tr> 
 
    </tbody> 
 
</table>

編輯： 鑑於上述解決方案，我想出來處理這個做另一種方式確定的問題，一）它工作在Firefox（以及作爲Chrome）和b）允許多個大小調整。該解決方案確實讓一些重大變化：

• ，處理調整大小的table周圍的額外div
• 的textarea已經不再調整

這背後的原因是，調整的元素設置height就可以了，所以如果你調整textarea的大小，那麼包含的單元格就會增長以適合它;如果您嘗試縮小另一個textarea，則它不起作用，因爲單元格已經增長到適合較大textarea的height。

div { 
 
    float: left; 
 
    overflow: auto; 
 
    position: relative; 
 
    resize: vertical; 
 
} 
 
table { 
 
    border-collapse: collapse; 
 
    height: 100%; 
 
} 
 
td { 
 
    border: 3px dashed red; 
 
    height: 100%; 
 
    padding: 15px; 
 
} 
 
textarea { 
 
    height: 100%; 
 
    resize: none; 
 
}

<div> 
 
    <table> 
 
     <tbody> 
 
      <tr> 
 
       <td><textarea name="" id="" cols="30" rows="10"></textarea></td> 
 
       <td><textarea name="" id="" cols="30" rows="10"></textarea></td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 
</div>

JS小提琴：http://jsfiddle.net/m7t5cqk8/