How to set first table column as bold (CSS)

Issue

I am a little rusty on CSS.

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

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..

PS.: Can't add the styles in tags along the document as the rows will be created progamatically.

Please let's try to keep the code simple.

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;
}

<table class="table">
  <thead>
    <tr class="firstrow">
      <th colspan="2">Sample</th>
    </tr>
  </thead>
  <tbody>
<tr><td>Line 1</td><td>Text</td></tr><tr><td>Line 2</td><td>Text</td></tr></tbody></table>

Solution

Problem with Brownser Compatibility perhaps. It is working fine on Chrome.

Answered By - PunchTheNewbie