title: How to set first table column as bold (CSS)
body: <p>I am a little rusty on CSS.</p>
  
  <p>Problem 1: I'm trying to make the example table below. I want only the first column to always be in bold. Can anyone help me to get the td first-child argument to work?
  Status: Solved... I had rows and columns mixed... pretty stupid error that passed my attention. - Thanks Ovokuro</p>
  
  <p>Problem2: I have corrected the code  (in the snippet) but it doesn't seem to work on IE or Chrome. Can anyone tell why? Looks good to me and works on the online sim, but not when I save it in an html doc. First column doesnt show as Bold; and column width is off..</p>
  
  <p>PS.: Can't add the styles in tags along the document as the rows will be created progamatically.</p>
  
  <p>Please let's try to keep the code simple.</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 {
    font-size: 16px;
    font-family: Optimum, Helvetica, sans-serif;
    border-collapse:collapse
  }
  tr {
      border-bottom: 1px solid #A9A9A9;
  }
  td {
    padding: 4px;
    margin: 3px;
    padding-left: 20px;
    width: 75%;
    text-align: justify;
  }
  
  th {
    background-color: #A9A9A9;
    color: #FFF;
    font-weight: bold;
    font-size: 28px;
    text-align: center;
  }
  
  td:first-child {
    font-weight: bold;
    width: 25%;
    text-align: left;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table class="table"&gt;
    &lt;thead&gt;
      &lt;tr class="firstrow"&gt;
        &lt;th colspan="2"&gt;Sample&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
  &lt;tr&gt;&lt;td&gt;Line 1&lt;/td&gt;&lt;td&gt;Text&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Line 2&lt;/td&gt;&lt;td&gt;Text&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>