title: Why html table cell's border color does not change?
body: <p>How can I make left border of the cell red? Why this does not work? Thanks!!</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
  .main-table {
      border-collapse: collapse;
  }
  .main-table td {
      margin: 0px;
      padding: 0px;
      border: 1px solid #aaa;
      padding: 1px 4px 1px 4px;
  }
  .left-border {
  border-left: 1px solid red !important;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  </code></pre>
  
  <p>Shouldn't left-border override the color specified on .main-table td?</p>
  
  <pre><code>&lt;table class='main-table' cellspacing='0' cellpadding='0'&gt;
  &lt;tr&gt;
      &lt;td&gt; 1 &lt;/td&gt;
      &lt;td&gt; 366 &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td &gt; 2 &lt;/td&gt;
      &lt;td class='left-border'&gt; 777 &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>