如何使文本区域适合表格单元格

Question

我在表格的输入中显示了一个文本区域。但我想调整它的大小，使其覆盖整个表格单元格，直到边框。逻辑——<textarea type="textarea" value="{{data.directRowNo}}" id = "abc"></textarea></td>我使用的 css 是 -  #abc{width: 100%;height: 443%;box-sizing: border-box;resize: vertical;max-height: 500px;}图片 -出现了我不想要的分叉线。

Answer 1

是这你在找什么？

CSS

table {

    width: 500px;

    margin: 20px auto;

    border-collapse:collapse;

    border-spacing: 0;

}

table td {

    background-color: red;

    border: 0;

    min-height: 20px;

}

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*/

}

HTML

<table>

    <tr>

        <td>

            cell

        </td>

    </tr>

    <tr>

        <td>

            <textarea></textarea>

        </td>

    </tr>

    <tr>

        <td>

            cell

        </td>

    </tr>

</table>

上面的代码将<textarea>与单元格一起调整大小，并将拉伸textarea直到单元格边框。

Answer 2

尝试

textarea{

width:100%;

height:100%;

 resize: none;

}

Answer 3

尝试将 td 的填充设置为 0：https : //jsfiddle.net/upb51sth/

td {

  background-color: red;

  padding: 0;

}