title: Font color in a table doesn't inherit from parent div
body: <p>For example I have a div with font color set to purple, some text within the div inherits the color, but some are not, e.g. in a table. (Save below code as <code>test.html</code> and open in the browser for testing)</p>
  <pre><code>&lt;div style=&quot;color: purple;&quot;&gt;
    &lt;p&gt;Some text&lt;/p&gt; &lt;!-- text here is purple --&gt;
    &lt;table&gt;
      &lt;tr&gt;
        &lt;td&gt;Table cell 1&lt;/td&gt; &lt;!-- text here is NOT purple --&gt;
        &lt;td&gt;Table cell 2&lt;/td&gt; &lt;!-- text here is NOT purple --&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
    Another text &lt;!-- text here is purple --&gt;
  &lt;/div&gt;
  </code></pre>
  <p>If I replace the div with body, they DO inherit.</p>
  <pre><code>&lt;body style=&quot;color: purple;&quot;&gt;
    &lt;p&gt;Some text&lt;/p&gt; &lt;!-- text here is purple --&gt;
    &lt;table&gt;
      &lt;tr&gt;
        &lt;td&gt;Table cell 1&lt;/td&gt; &lt;!-- text here is purple --&gt;
        &lt;td&gt;Table cell 2&lt;/td&gt; &lt;!-- text here is purple --&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
    Another text &lt;!-- text here is purple --&gt;
  &lt;/body&gt;
  </code></pre>
  <p>I'd like to know that:</p>
  <ol>
  <li>Why and how do they NOT inherit the style from the parent container?</li>
  <li>Is there an alternative workaround to make the content elements inherit the font color, as if they inherit from the body?</li>
  </ol>