How to set first table column as bold (CSS)

Question

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>

Answer 1

Target td:first-child instead of tr:first-child

Also, CSS declarations are terminated with ;. The <br> element is used in HTML to produce a line break in text.

Also note that td will always be a child of tr, so you don't need to declare tr td:first-child in this case. Similarly, tr is a child of table so you don't need table either.

table {
  font-size: 12px;
  border: 1px solid #CCC;
  font-family: Arial, Helvetica, sans-serif;
}

td {
  padding: 4px;
  margin: 3px;
  border: 1px solid #CCC;
}

th {
  background-color: #104E8B;
  color: #FFF;
  font-weight: bold;
}

td:first-child {
  font-weight: bold
}

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

Answer 2

Just add first-child next to td so it looks like this:

td:first-child {
  font-weight: bold;
}

Also if you want to add a table class before (just for namespacing):

.table1 td:first-child{
  font-weight:bold;
}