title: CSS class for an HTML Table is affecting another Class Table Layout
body: <p>I am pretty new to figuring out the quirks of css. I will admit, I am a novice. </p>
  
  <p>I have the following HTML:
  Click <a href="https://jsfiddle.net/a0mfzc1v/1/" rel="nofollow">here</a> for JSFiddle</p>
  
  <pre><code>&lt;table class="mainInfo4Col"&gt;
  &lt;tr&gt;
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;2&lt;/td&gt;
      &lt;td&gt;3&lt;/td&gt;
      &lt;td&gt;4&lt;/td&gt;        
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;5&lt;/td&gt;
      &lt;td&gt;&lt;input&gt;&lt;/td&gt;
      &lt;td&gt;7&lt;/td&gt;
      &lt;td&gt;8&lt;/td&gt;        
  &lt;/tr&gt;    
  &lt;/table&gt;        
  &lt;table class="tableinfo"&gt;
  &lt;tr&gt;
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;2&lt;/td&gt;
      &lt;td&gt;3&lt;/td&gt;
      &lt;td&gt;4&lt;/td&gt;        
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;5&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;7&lt;/td&gt;
      &lt;td&gt;8&lt;/td&gt;        
    &lt;/tr&gt;    
  &lt;/table&gt;
  
  &lt;style&gt;
  table {
      font-family: Verdana, Arial, Helvetica, Sans-serif;
      font-size:8pt;
      background-color: #F0F0F0;
      border-color: #0b23b5;
      color: #06187F;
      border-top-width : 1px;
              border-right-width : 1px;
              border-bottom-width : 1px;
              border-left-width : 1px;
              border-color: #010173;
              border-style : solid solid solid solid;
              width:100%;
          }
          th {
              font-family: Verdana, Arial, Helvetica, Sans-serif;
              font-size:8pt;
              color: #06187F;
              text-transform : uppercase;
          }
          td {
              padding: 1px;
          }
          table.mainInfo4Col {
              border-spacing: 1px 1px;
              table-layout: fixed;
              border-collapse: collapse;
              border-spacing: 1px 1px;
          }
          .mainInfo4Col tr:nth-child(odd) {
              background-color: #F2F1F1;
              font-family: Verdana, Arial, Helvetica, Sans-serif;
              font-size: 8pt;
              color: #010173;
              height:20pt;
              border-collapse: collapse;
              border-spacing: 1px 1px;
          }
          .mainInfo4Col tr:nth-child(even) {
              background-color: #DAE1E8;
              font-family: Verdana, Arial, Helvetica, Sans-serif;
              font-size: 8pt;
              color: #010173;
              height:20pt;
              border-collapse: collapse;
              border-spacing: 1px 1px;
          }
          table.mainInfo4Col td:nth-child(1), td:nth-child(3) {
              padding: 1px;
              text-align: right;
              white-space:nowrap;
              width: 25%;
          }
          table.mainInfo4Col td:nth-child(2), td:nth-child(4) {
              padding: 1px;
              text-align: left;
              white-space:nowrap;
              width: 25%;
          }
          table.tableinfo {
              border-spacing: 3px 3px;
              table-layout: inherit;
              border-collapse: collapse;
          }
          table.tableinfo th, td {
             padding: 1px;
          }
          table.tableinfo table:not(tr:first-child) {
             border-collapse: collapse;
             border-spacing: 1px 1px;
             vertical-align: top;
           }
       &lt;/style&gt;
  </code></pre>
  
  <p>*EDIT added CSS STYLE.</p>
  
  <p>My css is defined for a normal non class table, .mainInfo4Col Table, .tableinfo Table. However, it seems like the way I have written my CSS definitions, .mainInfo4Col class is affecting the appearance of .tableinfo. </p>
  
  <p>For example, .mainInfo4Col should be the only table with defined text alignment. But, the other table class once rendered has similar behavior. </p>
  
  <p>I have tried defining my css with table.class, or .class table with no difference. I too have tried defining using different selectors.</p>
  
  <p>I thought maybe I should use ">", for it to only take in parent-child relations but no success. . </p>
  
  <p>Any tips, are appreciated. 
  The end goal is to have  .mainInfo4Col class to have different odd and even row colors, and have even and odd tds be defined with their own characteristics. </p>
  
  <p>While, .tableinfo, should have it's own definitions. Sadly, .mainInfo4Col conflicts with the text alignment for .tableinfo class. Thank you.</p>