CODEWITHSUNDEEP
htmlcss
PunchTheNewbie
PunchTheNewbie

Reputation: 181

How to set first table column as bold (CSS)

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>

Upvotes: 6

Views: 20731

Answers (4)

Majstorboob
Majstorboob

Reputation: 21

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

Upvotes: 2

PunchTheNewbie
PunchTheNewbie

Reputation: 181

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

Upvotes: -1

Mario Junior Torres Perez
Mario Junior Torres Perez

Reputation: 139

Simple. Exist many ways to do that. One way is Applying direct styles in the tag. I mean open a style="" property in the <td> tag. will looks like: <td style="font-weight: bold">

Upvotes: 1

sol
sol

Reputation: 22949

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>

Upvotes: 10

Related Questions