title: background-color css property not working in table
body: <p>Here is html and CSS code:</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-css lang-css prettyprint-override"><code>    table,th,td{
        border:1px solid blue;
        border-collapse:collapse;
      }
      td{
        text-align:center;
      }
      td{padding:10px;
        color:#cc7722;
      }
      table{
        border-spacing:5px;
        background-color:yellowgreen;
        font-weight:bold;
        width:100%
      }
      #hello{
        color:red;
      }
      .hi{
        background-color:blue;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>     &lt;table&gt;
            &lt;caption id="hello"&gt;Employee Data&lt;/caption&gt;
            &lt;tr&gt;
              &lt;div class="hi"&gt;
              &lt;th&gt;Employee Name&lt;/th&gt;
              &lt;th&gt;
                Department
              &lt;/th&gt;
              &lt;th&gt;Salary&lt;/th&gt;
              &lt;/div&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;Vaibhav&lt;/td&gt;
              &lt;td&gt;CSE&lt;/td&gt;
              &lt;td&gt;10000&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/vQw8N.png" rel="noreferrer">Output</a></p>
  
  <p><strong>Here background color blue for class hi not shown</strong> 
  so what can be the reason 
  and what is the possible solution for this</p>