title: Can we use nested table after the `<tr></tr>`?
body: <p>I am displaying the record from database in the table list. Also, I have a follow-up button in each row, If any user clicks on followup button then a popup will open for a specific user with details.</p>
  
  <p>Or any other idea to handle this issue?</p>
  
  <p>I tried to use something like this</p>
  
  <pre><code>&lt;table&gt;
  &lt;thead&gt;&lt;tr&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;
  &lt;tbody&gt;
  &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
  
  &lt;div style="display:none"&gt;
  &lt;table&gt;
  &lt;thead&gt;&lt;tr&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;
  &lt;tbody&gt;
  &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>Full code</strong></p>
  
  <pre><code>        &lt;!DOCTYPE html&gt;
              &lt;html&gt;
              &lt;head&gt;
                  &lt;title&gt;&lt;/title&gt;
              &lt;/head&gt;
              &lt;body&gt;
  
                  &lt;table border="1"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;&gt;
                          &lt;th&gt;Name&lt;/th&gt;
                          &lt;th&gt;Products&lt;/th&gt;
                          &lt;th&gt;Qty&lt;/th&gt;
                          &lt;th&gt;Order Id&lt;/th&gt;
                          &lt;th&gt;Mobile &lt;/th&gt;
                          &lt;th&gt;Shipping address&lt;/th&gt;
                      &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                          &lt;?php  $n=1;
                           foreach ($cust_personal as $row)  
                           { $encryption_id=base64_encode($this-&gt;encryption-&gt;encrypt($row-&gt;o_id));//encrpt the id 
                              ?&gt;
                              &lt;tbody&gt;
                              &lt;tr&gt;
                                &lt;td&gt;&lt;?php echo $n;?&gt;&lt;/td&gt;
                                &lt;td&gt;&lt;?php echo $row-&gt;c_firstname;?&gt;&amp;nbsp; &lt;?php echo $row-&gt;c_lastname;?&gt;&lt;/td&gt;
                                &lt;td&gt;&lt;?php echo $row-&gt;o_product_brandname;?&gt;&lt;/td&gt;    
                                &lt;td&gt;&lt;?php echo $row-&gt;o_product_qty;?&gt;&lt;/td&gt;  
                                &lt;td&gt;&lt;?php echo $row-&gt;o_order_no;?&gt;&lt;/td&gt;
                                &lt;td&gt;&lt;?php echo $row-&gt;c_mobileno;?&gt;&lt;/td&gt;  
                                &lt;td&gt;&lt;?php echo $row-&gt;c_s_address;?&gt;&lt;/td&gt;
          &lt;td&gt; &lt;a  href="javascript:void(0)" class="table_icon pending" onclick="approve(this)" data-id="&lt;?=$row-&gt;o_id;?&gt;"&gt; &lt;span&gt;Pending&lt;/span&gt;&lt;/a&gt;
          &lt;a href="&lt;?php echo site_url('Customer_control/get_customer_view?key='.$encryption_id)?&gt;" class="table_icon view"&gt;View&lt;/a&gt; 
          &lt;a href="javascript:void(0)" class="table_icon archive" onclick="followup(this)" data-id="&lt;?=$row-&gt;o_id;?&gt;"&gt;Followup&lt;/a&gt;
                          &lt;/tr&gt;
  
       &lt;div id="popup-&lt;?=$row-&gt;o_id;?&gt;" style="display: none;" class="class="view_popup_profile"&gt;
        &lt;div class="profile_content"&gt;
      &lt;div class="profile_header clearfix"&gt;
                  &lt;table border="1"&gt;
                      &lt;thead&gt;&lt;th&gt;sub&lt;/th&gt;&lt;/thead&gt;
                      &lt;tbody&gt;&lt;tr&gt;&lt;td&gt;maths&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;
                  &lt;/table&gt;
  &lt;/div&gt;&lt;/div&gt;
                  &lt;/div&gt;
                         &lt;?php } $n++; ?&gt; 
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;script type="text/javascript"&gt;
                  function followup(obj) 
              {
                  var id = $(obj).data('id');
                  //console.log(id);
                  $("#popup-"+id).show();  
              }
              &lt;/script&gt;
              &lt;/body&gt;
              &lt;/html&gt;
  </code></pre>
  
  <p>This is the output I am getting it.
  <a href="https://i.stack.imgur.com/GwgBZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GwgBZ.png" alt="enter image description here"></a></p>
  
  <p>Why I need a nested table because when I am adding the below code and click on followup button then I am getting the popup on full screen.</p>
  
  <pre><code>&lt;/tr&gt;
   &lt;div id="popup-&lt;?=$row-&gt;o_id;?&gt;" style="display: none;"&gt;
      &lt;!--more details here--&gt;
        &lt;/div&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>If I added a table in the popup to display the following list then it's not working.</p>
  
  <pre><code>    &lt;/tr&gt;
       &lt;div id="popup-&lt;?=$row-&gt;o_id;?&gt;" style="display: none;"&gt;
              &lt;table border="1"&gt;
                      &lt;thead&gt;&lt;th&gt;sub&lt;/th&gt;&lt;/thead&gt;
                      &lt;tbody&gt;&lt;tr&gt;&lt;td&gt;maths&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;
                  &lt;/table&gt;
  &lt;/div&gt;
      &lt;/tbody&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p><strong>css</strong></p>
  
  <pre><code>        .view_popup_profile {
      position: fixed; /* Stay in place */
      z-index: 9; /* Sit on top */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
      -webkit-animation-name: fadeIn; /* Fade in the background */
      -webkit-animation-duration: 0.4s;
      animation-name: fadeIn;
      animation-duration: 0.4s;
  }
  /* Modal Content */
  .profile_content {
      position: fixed;
      top: 25%;
      background-color: #fefefe;
      width: 100%;
      -webkit-animation-name: slideIn;
      -webkit-animation-duration: 0.5s;
      animation-name: slideIn;
      animation-duration: 0.5s;
      max-width: 922px;
      margin: auto;
      left: 0;
      right: 0;
      box-shadow: 0 0 15px rgba(0,0,0,.3);
  }
  /* The Close Button */
  
  .profile_header {
      padding: 1px 20px;
      background-color: #fafafc;
      color: white;
      /* min-height: 58px; */
      border-bottom: 1px solid #f7f7f7;
      display: block;
      width: 100%;
  }
  .profile_header:after {
      content: '';
      width: 0;
      height: 0;
      border-left: 17px solid transparent;
      border-right: 17px solid transparent;
      border-top: 16px solid #f7f7f7;
      position: absolute;
  }
  .profile_body {
      padding: 35px 50px;
  }
  .profile_footer {
      padding: 0;
      background-color: #fdfdfe;
      color: #858585;
  }
  p{color: #000;}
      /* Add Animation */
      @-webkit-keyframes slideIn {
   from {
   top: -500px;
   opacity: 0
  }
   to {
   top:25%;
   opacity: 1
  }
  }
   @keyframes slideIn {
   from {
   top: -500px;
   opacity: 0
  }
   to {
   top:25%;
   opacity: 1
  }
  }
   @-webkit-keyframes fadeIn {
   from {
   opacity: 0
  }
   to {
   opacity: 1
  }
  }
   @keyframes fadeIn {
   from {
   opacity: 0
  }
   to {
   opacity: 1
  }
  }
  </code></pre>