title: How to make nested table match width of parent with CSS
body: <p>I have a nested table in html:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;1&lt;/td&gt;
              &lt;td&gt;1&lt;/td&gt;
              &lt;td&gt;1&lt;/td&gt;
              &lt;td&gt;1&lt;/td&gt;
              &lt;td&gt;1&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="altRow"&gt;
              &lt;td&gt;
                  &lt;table&gt;
                      &lt;tbody&gt;
                          &lt;tr&gt;
                              &lt;td&gt;Col 1 50%&lt;/td&gt;
                              &lt;td&gt;Col 2 50%&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td&gt;Col 1 50%&lt;/td&gt;
                              &lt;td&gt;Col 2 50%&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;2&lt;/td&gt;
              &lt;td&gt;2&lt;/td&gt;
              &lt;td&gt;2&lt;/td&gt;
              &lt;td&gt;2&lt;/td&gt;
              &lt;td&gt;2&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;3&lt;/td&gt;
              &lt;td&gt;3&lt;/td&gt;
              &lt;td&gt;3&lt;/td&gt;
              &lt;td&gt;3&lt;/td&gt;
              &lt;td&gt;3&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>with some basic CSS:</p>
  
  <pre><code>tr:nth-child(odd) {
    background: #f1f1f1;
  }
  
  td {
    padding: 1rem;
  }
  
  .altRow table {
    width: 100%;
  }
  </code></pre>
  
  <p>What I want is for the nested table to be the same width as the parent table with two columns, each 50% of the parent. </p>
  
  <p>For example, if the parent table spans 100% of the page width I would expect the row with the class "altRow" to also span the whole page width along with all it's decendents. The altrow bottom level cells should be 50% of the page width.</p>
  
  <p>Currently the nested table is constrained to the widest point of first column and no matter what I do, I can't seem to get around this.</p>
  
  <p>Codepen:
  <a href="https://codepen.io/afisher988/pen/KZPLLq" rel="nofollow noreferrer">https://codepen.io/afisher988/pen/KZPLLq</a></p>