jQuery.expandingTextarea not working inside a table

问题

When running the jQuery plugin bgrins/ExpandingTextareas (github), <textarea> tags inside 100%-width tables do not work as expected. In particular, the textarea does not expand vertically as desired, and the horizontal position of the textarea has an incorrect offset that changes as one inputs text.

Here is a sample jsFiddle illustrating the problem.

I have also opened a corresponding issue, #33 on GitHub.

Any thoughts on why this is happening and how to remedy it would be most appreciated.

回答1:

please refer to this answer for the issue related to textarea inside table cell.

below is what i hope is the solution of your problem

DEMO

html

<table border="1">
<tr>
    <td>One</td>
    <td>Two</td>
    <td id="expand"><textarea placeholder="type here"></textarea></td>
</tr>

css

table {
width: 100%;
table-layout: fixed;
}

textarea {
border: none;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

}

script

$("textarea").expandingTextarea({
  resize: function() //callback
  {
     var i=$('textarea').height();

   //inspect the textarea and cell containing it, height difference is 4.

     $('#expand').attr('height',i+4+'px');   
  }
})

来源：https://stackoverflow.com/questions/19893416/jquery-expandingtextarea-not-working-inside-a-table