title: Remove default cell padding from HTML nested tables
body: <p>I have a parent table and each td tag in tr tag contains a child table (For example - Data WS-C3.... in the picture).</p>
  
  <pre><code>[![&lt;table class="table table--bordered table--nostripes table-top"&gt;
      &lt;thead&gt;
         &lt;th&gt;PID&lt;/th&gt;
         &lt;th&gt;Base Licence&lt;/th&gt;
       &lt;/thead&gt;
       &lt;tbody&gt;
          &lt;tr&gt;
             &lt;td&gt;
                 &lt;a (click)="addNewPid()"&gt;Add New PID&lt;/a&gt;
             &lt;/td&gt;
             &lt;td&gt;&lt;a (click)="addNewPid()"&gt;Add New PID&lt;/a&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
             &lt;td&gt;
                &lt;custom-table here &gt;&lt;/custom-table&gt;
             &lt;/td&gt;
             &lt;td&gt;
                 &lt;custom-table here&gt;&lt;/custom-table&gt;
             &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;]
  </code></pre>
  
  <p>Since there are less elements in the right column, it's adding default padding to match the size of left column. I want to display those 3 rows of the right column right after Add new PID. How to remove the default padding present in the right column? I tried givng span=0 but its not working. Any idea please</p>
  
  <p><a href="https://i.stack.imgur.com/3OUz3.png" rel="nofollow noreferrer">https://i.stack.imgur.com/3OUz3.png</a></p>