title: Expand textarea outside parent td
body: <p>I have a table where I would like to be able to double-click on cells to edit them. Even though I am only showing the first few characters in the actual table  cell I would like to show/edit the full text on double click inside a textarea element. </p>
  
  <p>The textarea element would stay hidden until the table cell is doubleclicked, it then becomes visible on top of the table cell until blur() event when it's hidden again. If there is a better way of doing this, please let me know.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function () {
      $('td.nota').dblclick(function (e) {
         e.stopPropagation();      //stop the propagation of the event here
         $(this).children().css("display","block");
         $(this).children().focus();
         //alert('test');
      });
  });
  
  $('td.nota').children().blur(function(){
  $(this).css("display","none");
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      margin: 50px 25px;
  }
  
  table {
    width: auto !important;
  }
  
  .edit-box {
  display:none;
  float: left;
  margin-left: -8px;
  margin-top: -28px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="table-responsive"&gt;
     &lt;table class="table table-bordered table-hover"&gt;
        &lt;tbody&gt;
           &lt;tr&gt;
              &lt;td class="text-center"&gt;&lt;input type="checkbox" name="selected[]" value="761"&gt;
              &lt;/td&gt;
              &lt;td class="text-left nota" id="761" style="max-width: 20ch;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit&lt;textarea class="edit-box" rows="2"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit&lt;/textarea&gt;&lt;/td&gt;
           &lt;/tr&gt;
           &lt;tr&gt;
              &lt;td class="text-center"&gt;&lt;input type="checkbox" name="selected[]" value="760"&gt;
              &lt;/td&gt;
              &lt;td class="text-left nota" id="760" style="max-width: 20ch;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit&lt;textarea class="edit-box" rows="2"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit&lt;/textarea&gt;&lt;/td&gt;
           &lt;/tr&gt;
        &lt;/tbody&gt;
     &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Same code in this fiddle: <a href="https://jsfiddle.net/prxbl/1hw2f0b9/29/" rel="nofollow">https://jsfiddle.net/prxbl/1hw2f0b9/29/</a></p>
  
  <p>Current problems:</p>
  
  <ol>
  <li>Textarea element should expand beyond the parent td, on top of everything, without breaking table layout.</li>
  <li>Textarea element should not be transparent, it should mask elements behind.</li>
  </ol>
  
  <p>Any help on solving these problems is greatly appreciated.</p>