 <p>If I understood your question right you can use rgba to shade the color.</p> <ul> <li>background-color: rgba(0, 0, 0, 1.5); // darker</li> <li>background-color: rgba(0, 0, 0, 1.0); // normal</li> <li>background-color: rgba(0, 0, 0, 0.5); // lighter</li> </ul> <p><strong>css</strong></p> <pre><code>.table-class { width: 500px; font-size: 15px; } .table-class td { width: 25%; } #owner tr:nth-child(odd) { background-color: rgba(0, 0, 0, 1.2); color: rgba(255, 255, 255, 0.8); } #owner tr:nth-child(even) { background-color: rgba(0, 0, 0, 0.8); color: rgba(255, 255, 255, 1.2); } </code></pre> <p><strong>html</strong></p> <pre><code>&lt;table class="table-class" id="owner"&gt; &lt;tr&gt; &lt;td&gt;test test&lt;/td&gt; &lt;td&gt;test test&lt;/td&gt; &lt;td&gt;test test&lt;/td&gt; &lt;td&gt;test test&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;test test&lt;/td&gt; &lt;td&gt;test test&lt;/td&gt; &lt;td&gt;test test&lt;/td&gt; &lt;td&gt;test test&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;test test&lt;/td&gt; &lt;td&gt;test test&lt;/td&gt; &lt;td&gt;test test&lt;/td&gt; &lt;td&gt;test test&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;test test&lt;/td&gt; &lt;td&gt;test test&lt;/td&gt; &lt;td&gt;test test&lt;/td&gt; &lt;td&gt;test test&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; </code></pre> <p><strong>JSFiddle</strong> you can play around with it to see if this is what you need.</p> <p><a href="http://jsfiddle.net/t4J9s/" rel="nofollow">http://jsfiddle.net/t4J9s/</a></p>