設置表格內textarea的高度

我已經將textarea的高度設置爲500％，但由於某種原因它不會更改爲500％。我認爲這與它在桌子內部有關，但我不確定要更改什麼來正確設置高度。出於某種原因，textarea的寬度可以在表格內改變。設置表格內textarea的高度

table,td { 
 
border: 1px solid black; 
 
} 
 
textarea { 
 
resize: none; 
 
width: 100%; 
 
height: 500%; 
 
}

<table> 
 
<tr> 
 

 
<td> 
 
firstTD 
 
</td> 
 

 
<td> 
 
<form method = 'POST' action = 'updateProfile.php'> 
 
<textarea id = 'textarea' placeholder = 'type something here...' onfocus = \"this.placeholder = ''\" onblur = \"this.placeholder = 'type something here...'\" maxlength = '10000'></textarea> 
 
</form> 
 
</td> 
 

 
</tr> 
 
</table>

來源

2015-12-16 frosty

檢查https://stackoverflow.com/a/10943721/3063226，使用框大小：邊框;對於textarea可能是你正在尋找的。 – Heitor

對方回答解決了這個問題，但沒有解釋它。當你使用％來定義CSS中的寬度/高度時，你可以將它設置爲該元素容器寬度/高度的任何％。

當你設置你的textarea爲100％的空<td>，它不會很大。

將其設置爲posistion：絕對將工作如果沒有祖先元素的位置。更簡單的方法是隻使用％以外的其他值來定義寬度和高度。嘗試width:10em;並進行調整，直到您找到正確的答案。

編輯。

要回答評論中的問題：在這種情況下使用％來定義高度的原因是因爲空單元格有高度，而不是寬度。一個空的表格單元仍然繼承該行的高度，該高度與最高的<td>一樣高。在這種情況下，有另一個<td>有內容，給單元格一個高度。

所以，如果有另一行，並且同一列中的一個單元格有內容，則寬度也可以與％一起使用。

也就是說，在表中使用％作爲寬度和高度不是一個好主意，因爲當表格中的內容發生變化時，您的百分比會發生變化。另外，當你使用％而不是px或em時，它不會拉伸父容器。

再次編輯

老實說，我甚至沒有注意到表單元素。那麼你的百分比是相對於表單元素的高度/寬度而不是<td>。必須有一些填充符給你的單元格寬度/高度，但表單不會有任何尺寸。

來源

2015-12-16 00:30:47

我在這裏解釋：http://stackoverflow.com/questions/34301906/setting-the-height-of-a-textarea-inside-a-table/34301935?noredirect=1#comment56346033_34301935 –

這是你說的。將其更改爲em或px可以立即解決問題。另外，你的解釋方式讓我明白我做錯了什麼，以及未來需要注意什麼。 – frosty

這是一件很好的事情要知道。但是，如果是這種情況，那麼即使是寬度上的％也不應該起作用。對？只是好奇。 – DinoMyte

嘗試設置position: absolute到textarea並給予position: relative父。同時刪除width並將left和right的值設爲0。但請記住，這將使textarea溢出內容。這是你所期待的嗎？

table, 
 
td { 
 
    border: 1px solid black; 
 
    position: relative; 
 
    width: 350px; 
 
} 
 
textarea { 
 
    resize: none; 
 
    height: 500%; 
 
    left: 0; 
 
    right: 0; 
 
    position: absolute; 
 
    top: 0; 
 
}

<table> 
 
    <tr> 
 
    <td> 
 
     firstTD 
 
    </td> 
 
    <td> 
 
     <form method='POST' action='updateProfile.php'> 
 
     <textarea id='textarea' placeholder='type something here...' onfocus=\ "this.placeholder = ''\" onblur=\ "this.placeholder = 'type something here...'\" maxlength='10000'></textarea> 
 
     </form> 
 
    </td> 
 
    </tr> 
 
</table>

或者，如果你需要這樣的事？

table, 
 
td { 
 
    border: 1px solid black; 
 
    position: relative; 
 
    width: 350px; 
 
} 
 
textarea { 
 
    resize: none; 
 
    height: 10em; 
 
    width: 100%; 
 
    display: block; 
 
    box-sizing: border-box; 
 
}

<table> 
 
    <tr> 
 
    <td> 
 
     firstTD 
 
    </td> 
 
    <td> 
 
     <form method='POST' action='updateProfile.php'> 
 
     <textarea id='textarea' placeholder='type something here...' onfocus=\ "this.placeholder = ''\" onblur=\ "this.placeholder = 'type something here...'\" maxlength='10000'></textarea> 
 
     </form> 
 
    </td> 
 
    </tr> 
 
</table>

來源

2015-12-16 00:22:47

請運行代碼片段。 – frosty

textarea的全部搞砸了。 – frosty

@frosty更新。對不起，哥們。 –

設置表格內textarea的高度

回答

相關問題