title: Why div 100% width doesn't work as expected
body: <p>I'm learning CSS and finding that it's not always so intuitive (welcome to webdev, I guess). :)</p>
  
  <p>In an attempt to make a simple, static progress bar, I use the HTML file below:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;&lt;/head&gt;
    &lt;body&gt;
      &lt;table border='1' cellspacing='0'&gt;
        &lt;tr&gt;
          &lt;td&gt;Sample Cell&lt;/td&gt;
          &lt;td&gt;
            &lt;!-- This is meant to be a progress bar --&gt;
            &lt;div style="background-color: #0a0; width: 20%;"&gt;
              &lt;div style="text-align: center; width: 300px;"&gt;
                Text Here!
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and I get this:</p>
  
  <p><img src="https://i.stack.imgur.com/ci8kY.png" alt="Progress Bar"></p>
  
  <p>which is good, except for the fact that the width of the second column is fixed. But if I go ahead and change <code>width: 300px</code> to <code>width: 100%</code>, the text instead goes into the green box, rather than the whole table cell.</p>
  
  <p>How can I "fill" the table cell with the text, without imposing a specific length restriction?</p>