调整textArea的高度和宽度以适应< td>一张桌子 [英] Adjust the textArea height and width to fit in <td> of a table

问题描述

我在表格中显示html内容。为了打印标签，我在表格的< td> 中使用 textArea 。所以我想调整 textArea 的高度和宽度，使它等于< td> 。我该如何做到这一点

解决方案

dabblet。演示

问题在于textarea的行为不是正常的盒子模型，这就是为什么我们需要使用盒子大小的方法

this CSS 会帮助你：

  textarea {
 border：none; 
宽度：100％; 
 -webkit-box-sizing：border-box; / *< = iOS4，< = Android 2.3 * / 
 -moz-box-sizing：border-box; / * FF1 + * / 
 box-sizing：border-box; / * Chrome，IE8，Opera，Safari 5.1 * / 
} 
  

访问 css 文件，您可以使用内联css

像这样：

 < textarea style =border：none; width：100％; -webkit-box-sizing：border-box; -moz-box-sizing：border- box; box-sizing：border-box;> < / textarea的> 
  

I am displaying the html content in a table. For printing the tags i am using textArea in the <td> of the table. So i want to adjust the height and width of textArea so that it is equal to the <td>. How can i do this

解决方案

dabblet.demo

the problem is that textarea behave not normal box-model, that's why we need this trick with box-sizing

this CSS will help you:

textarea {
    border: none;
    width: 100%;
    -webkit-box-sizing: border-box; /* <=iOS4, <= Android  2.3 */
       -moz-box-sizing: border-box; /* FF1+ */
            box-sizing: border-box; /* Chrome, IE8, Opera, Safari 5.1*/
}

if you have no access to css file, you can use inline css

like this:

<textarea style="border: none; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;"> </textarea>

这篇关于调整textArea的高度和宽度以适应< td>一张桌子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！