title: Making sure that the table width of two tables are the same even though they don't have the same number of columns
body: <p>I have two tables with different number of columns and their total width are different, and for some reason I can't fix it.</p>
  
  <p>I tried changing the width of the tables, but it doesn't seem to work. Even when I set them both to 100%, the width of the table seems to depend on the number of columns.</p>
  
  <p><a href="https://jsfiddle.net/rp8yq1vu/" rel="nofollow noreferrer">https://jsfiddle.net/rp8yq1vu/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="background-color:black"&gt;
    &lt;div style="height: auto; overflow: auto;"&gt;
      &lt;div&gt;
        &lt;table style="background: rgb(255, 255, 255) none repeat scroll 0% 0%; width: 100%; border-collapse: collapse; border-spacing: 0px; table-layout: auto; font-family: Roboto, sans-serif;"&gt;
          &lt;thead style="border-bottom: 1px solid rgb(224, 224, 224);"&gt;
            &lt;tr style="border-bottom: 1px solid rgb(224, 224, 224); color: rgba(0, 0, 0, 0.87); height: 48px;"&gt;
              &lt;th style="min-width: 20px; max-width: 20px;"&gt;&lt;/th&gt;
              &lt;th style="min-width: 100px; max-width: 100px;"&gt;&lt;/th&gt;
              &lt;th style="min-width: 100px; max-width: 100px; overflow-wrap: break-word;"&gt;1&lt;/th&gt;
              &lt;th style="min-width: 100px; max-width: 100px; overflow-wrap: break-word;"&gt;2&lt;/th&gt;
              &lt;th style="min-width: 100px; max-width: 100px; overflow-wrap: break-word;"&gt;3&lt;/th&gt;
              &lt;th style="min-width: 100px; max-width: 100px; overflow-wrap: break-word;"&gt;4&lt;/th&gt;
              &lt;th style="min-width: 100px; max-width: 100px; overflow-wrap: break-word;"&gt;5&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
        &lt;/table&gt;
      &lt;/div&gt;
      &lt;div style="height: inherit; overflow: hidden auto;"&gt;
        &lt;table style="background: rgb(255, 255, 255) none repeat scroll 0% 0%; width: 100%; border-collapse: collapse; border-spacing: 0px; table-layout: auto; font-family: Roboto, sans-serif;"&gt;
          &lt;tbody style="overflow: auto; width: 100%;"&gt;
            &lt;tr style="border-bottom: 1px solid rgb(224, 224, 224); color: rgba(0, 0, 0, 0.87); height: 48px;"&gt;
              &lt;td style="min-width: 20px; max-width: 20px;"&gt;1.&lt;/td&gt;
              &lt;td style="min-width: 100px; max-width: 100px; font-weight: 900; overflow-wrap: break-word; line-height: 25px;"&gt;hello&lt;br&gt;&lt;/td&gt;
              &lt;td style="width: 100%;"&gt;&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr style="border-bottom: 1px solid rgb(224, 224, 224); color: rgba(0, 0, 0, 0.87); height: 48px;"&gt;
              &lt;td style="min-width: 20px; max-width: 20px;"&gt;1.&lt;/td&gt;
              &lt;td style="min-width: 100px; max-width: 100px; font-weight: 900; overflow-wrap: break-word; line-height: 25px;"&gt;tforty&lt;br&gt;&lt;/td&gt;
              &lt;td style="width: 100%;"&gt;&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr style="border-bottom: 1px solid rgb(224, 224, 224); color: rgba(0, 0, 0, 0.87); height: 48px;"&gt;
              &lt;td style="min-width: 20px; max-width: 20px;"&gt;1.&lt;/td&gt;
              &lt;td style="min-width: 100px; max-width: 100px; font-weight: 900; overflow-wrap: break-word; line-height: 25px;"&gt;attitude899&lt;br&gt;&lt;/td&gt;
              &lt;td style="width: 100%;"&gt;&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr style="color: rgba(0, 0, 0, 0.87); height: 48px;"&gt;
              &lt;td style="min-width: 20px; max-width: 20px;"&gt;1.&lt;/td&gt;
              &lt;td style="min-width: 100px; max-width: 100px; font-weight: 900; overflow-wrap: break-word; line-height: 25px;"&gt;&lt;img src="https://www.broken.org" width="100" height="100"&gt;&lt;br&gt;&lt;/td&gt;
              &lt;td style="width: 100%;"&gt;&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want both tables to have the same width and hide the black background.</p>