title: How can I automatically re-size standard table cells to fit header cells within the table's width?
body: <p>My code displays a table. Each table row starts with a header cell, followed by a standard cell.</p>
  
  <p>SOME table rows contain an additional header cell which follows the standard cell.</p>
  
  <p>I want to automatically re-size standard cells IF there is a header cell that follows them. I want each table row to fit inside of the table's width boundary.</p>
  
  <p>I don't want the header cells to be re-sized, only the standard cells in order to fit the header cells in the table row.</p>
  
  <p><a href="http://i.stack.imgur.com/kq9xi.png" rel="nofollow">This is what the table looks like</a></p>
  
  <p><a href="http://i.stack.imgur.com/43Hqu.png" rel="nofollow">This is what I want it to look like</a></p>
  
  <p>Only the standard cell gets re-sized to fit the following header cell in order to match the width of the other rows in the table.</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
      &lt;link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'&gt;
      &lt;style&gt;
          body {
              color: #FFF;
              font-family: 'Open Sans', sans-serif;
              text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
          }
  
          table {
              border-collapse: collapse;
              font-size: 25px;
              margin: auto;
              width: 500px;
          }
  
          th,
          td {
              border: 1px solid black;
              height: 50px;
              padding: 5px;
              text-align: center;
          }
  
          th {
              background-color: #8000FF;
              color: #FFF;
              width: 50px;
          }
  
          td {
              width: 350px;
          }
  
          table tr:nth-child(odd) td {
              background-color: #FF8000;
          }
  
          table tr:nth-child(even) td {
              background-color: #00FF80;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;table&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;th&gt;18&lt;/th&gt;
                  &lt;td&gt;LqtgHRqNcW&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;th&gt;91&lt;/th&gt;
                  &lt;td&gt;BhydHJUADT&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;th&gt;85&lt;/th&gt;
                  &lt;td&gt;frvFQoRUuC&lt;/td&gt;
                  &lt;th&gt;5214&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;th&gt;06&lt;/th&gt;
                  &lt;td&gt;tIfFHLblmN&lt;/td&gt;
                  &lt;th&gt;8808&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;th&gt;49&lt;/th&gt;
                  &lt;td&gt;HMPbrfKYcN&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;th&gt;68&lt;/th&gt;
                  &lt;td&gt;mMxIjEQMgD&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;th&gt;39&lt;/th&gt;
                  &lt;td&gt;dDFSkkkLww&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;th&gt;57&lt;/th&gt;
                  &lt;td&gt;vMvOZYyLIB&lt;/td&gt;
                  &lt;th&gt;3235&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;th&gt;12&lt;/th&gt;
                  &lt;td&gt;AKWQsKDNpr&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;th&gt;58&lt;/th&gt;
                  &lt;td&gt;oCNXiRSwOO&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/yb1hcy7q/" rel="nofollow">https://jsfiddle.net/yb1hcy7q/</a></p>
  
  <p>How can I automatically re-size standard table cells to fit header cells within the table's width?</p>
  
  <h2>Thank you for reading my question, I'd appreciate all the help I can get.</h2>