Question

I have CSS definitions for various elements around Table as shown below (Details omitted, only style names for reference).

table.entities {
border: 1px solid #c5d7ef;
border-collapse: collapse;
width: 100%;
margin-bottom: 0;
}

table.entities th, table.entities td {
padding: .25em 1.5em .5em .5em;
}
table.entities th {
  font-weight: bold;
  text-align: left;
  background: #e5ecf9;
  white-space: nowrap;
}

table.entities th a, table.entities th a:visited {
  color: black;
  text-decoration: none;
}

table.entities td {
  background-color: #fff;
  text-align: left;
  vertical-align: top;
  cursor: pointer;
}

table.entities tr.even td {
  background-color: #f9f9f9;
}

And I apply the styles for even rows like:

flexTable.getRowFormatter().getElement(row).setClassName("even"); 

But for some reason, the header styles are not applied to table. Here is what I have tried

• As it is I would expect th to apply style to first row, but not sure if that is a valid assumption to make
• Changed the header style from th to something like theader and then explicitely applied to first row using row formatter for first row. I tried first row value as 1 & 0 both but either didn’t give me results

Can anyone help me spotting where I might be going wrong?

Answer 1

I am pretty sure that the FlexTable does not render <th> tags. Everything is contained in the <tbody>.

You must also remember that the <tr> tag is pretty much unstylable so to style the whole row you need to apply the same style to all child <td> tags.

tr.someStyle td {
  /* all styles that apply to the row */
}

If you post your actual styles and what is not being applied, maybe we can help further.