javascript - CSS only works for table and not working for table header (th) -

i appending html dynamically using javascript , want append css along html. in code, css table being picked browser, css th not showing up.

javascript

var html = "<table class = 'table'>";     html += "<thead>";         html += "<tr><th>";         html += "name: " + data.name;         html += "</th></tr>";     html += "</thead>";      html += "<tbody>";         html += "<tr><td>";         html += "address: " + data.address;         html += "</td></tr>";         html += "<tr><td>";         html += "phone: " + data.phone;         html += "</td></tr>";     html += "</tbody>"; html += "</table>";  $(".info").html(html); 

css

.table {     border: 1px solid red; }  .th {     /* not applied */     color: red;  } 

why happening?

you did not specify class th. must <th class='th'> according css.

or can change stylesheet: remove dot in front of th.