title: Display div below the row in html table?
body: <p>I have below code:</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  
  
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"&gt;&lt;/script&gt;
  
  
      &lt;style type="text/css"&gt;
         table {
     table-layout: fixed;
     width: 100%;
     border-collapse: collapse;
     }
  
  td {border: 1px solid #000; padding: 5px; vertical-align: top;}
  
      &lt;/style&gt;
  
  
      &lt;script type="text/javascript"&gt;
          $(document).ready(function() {
          $('#content1').hide();
          $('#content2').hide();
          $('#content3').hide();
  
  
  $("input").click(function() {
   var thisRow = $(this).closest('tr'); //parent row of the input or whatever is the click trigger
   var conDiv = $(this).data("href"); //returns #content1 - id of the content div you want shown
   var conH = $(conDiv).height(); //corresponding content div height
   var rowH = $(thisRow).height(); // this row height
   var newrowH = conH + rowH; //the new row height
   var posL = $(thisRow).position().left; // left position that div needs to be
   var posT = $(thisRow).position().top + rowH + 5 + 'px';  // top position that div needs to be ** not working properly!!
  
  
     if ( $(conDiv).is(":visible") ) {
         $(thisRow).css({"height" : "auto"});
         $(conDiv).css({"display" : "none", "left": "auto", "top" : "auto" });
     } else  {
         //reset all rows to normal height
         $("tr").css({"height" : "auto"}); 
         //expand the height of this row
         $(thisRow).css({"height" : newrowH});
  
         // reset all content divs.. hide them             
         $("[id*=content]").css({"display" : "none", "left": "auto", "top" : "auto"}); 
         //show the one you want
         $(conDiv).css({"display" : "block", "left": posL, "top" : posT});
     }
  });
  
  });
   &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="table-wrap"&gt;
  &lt;table summary="test" cellspacing="0" id="master"&gt;
      &lt;colgroup&gt;
          &lt;col width="40px"&gt;
          &lt;col span="4" width="25%"&gt;
      &lt;/colgroup&gt;
  
  &lt;thead&gt;
     &lt;tr&gt;
       &lt;th&gt;&amp;nbsp;&lt;/th&gt;
       &lt;th&gt;&lt;span&gt;Customer&lt;/span&gt;&lt;/th&gt;
       &lt;th&gt;&lt;span&gt;OrderID&lt;/span&gt;&lt;/th&gt;
       &lt;th&gt;&lt;span&gt;Order date&lt;/span&gt;&lt;/th&gt;
       &lt;th&gt;&lt;span&gt;Order Total&lt;/span&gt;&lt;/th&gt;
     &lt;/tr&gt;
  &lt;/thead&gt;
  
  &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;input type="button" name="" value=" " data-href="#content1" &gt;&lt;/td&gt;
          &lt;td&gt;Ernst Handel&lt;/td&gt;&lt;td&gt;10258&lt;/td&gt;&lt;td&gt;07/17/1996&lt;/td&gt;&lt;td&gt;$403.72&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
          &lt;td&gt;&lt;input type="button" name="" value=" " data-href="#content2"&gt;&lt;/td&gt;
          &lt;td&gt;Wartian Herkku&lt;/td&gt;&lt;td&gt;10270&lt;/td&gt;&lt;td&gt;08/01/1996&lt;/td&gt;&lt;td&gt;$1,376.00&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
          &lt;td&gt;&lt;input type="button" name="" value=" " data-href="#content3"&gt;&lt;/td&gt;
          &lt;td&gt;Magazzini Alimentari Riuniti&lt;/td&gt;&lt;td&gt;10275&lt;/td&gt;&lt;td&gt;08/07/1996&lt;/td&gt;&lt;td&gt;$15.36&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;div id="content1"&gt;
  &lt;h2&gt;content for row 1&lt;/h2&gt;
  &lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;head 1&lt;/th&gt;&lt;th&gt;head 2&lt;/th&gt;&lt;th&gt;head 3&lt;/th&gt;&lt;th&gt;head 4&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;cell 1&lt;/td&gt;&lt;td&gt;cell 2&lt;/td&gt;&lt;td&gt;cell 3&lt;/td&gt;&lt;td&gt;cell 4&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;p&gt;Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.&lt;/p&gt;
  &lt;/div&gt;&lt;!-- content1 --&gt;
  
  &lt;div id="content2"&gt;
  &lt;h2&gt;content for row 2&lt;/h2&gt;
  &lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;head 1&lt;/th&gt;&lt;th&gt;head 2&lt;/th&gt;&lt;th&gt;head 3&lt;/th&gt;&lt;th&gt;head 4&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;cell 1&lt;/td&gt;&lt;td&gt;cell 2&lt;/td&gt;&lt;td&gt;cell 3&lt;/td&gt;&lt;td&gt;cell 4&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;p&gt;Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.&lt;/p&gt;
  &lt;/div&gt;&lt;!-- content2 --&gt;
  &lt;div id="content3"&gt;
  &lt;h2&gt;content for row 3&lt;/h2&gt;
  &lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;head 1&lt;/th&gt;&lt;th&gt;head 2&lt;/th&gt;&lt;th&gt;head 3&lt;/th&gt;&lt;th&gt;head 4&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;cell 1&lt;/td&gt;&lt;td&gt;cell 2&lt;/td&gt;&lt;td&gt;cell 3&lt;/td&gt;&lt;td&gt;cell 4&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;p&gt;Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.&lt;/p&gt;
  &lt;/div&gt;&lt;!-- content3 --&gt;
  &lt;/div&gt;&lt;!-- table-wrap --&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Div should be displayed below the row on click of button. but it is displaying below the table as below.</p>
  
  <p><img src="https://i.stack.imgur.com/65mXs.png" alt="enter image description here"></p>
  
  <p>But it should display as :</p>
  
  <p><img src="https://i.stack.imgur.com/a31O6.png" alt="enter image description here"></p>
  
  <p>Please help me.</p>
  
  <p>Thanks!</p>