jebmarcus jebmarcus - 3 months ago 8
CSS Question

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

I am appending html dynamically using Javascript and want to append some css along with the html. In my code, only the css for table is being picked up by the browser, the css for th is 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 successfully */
color: red;
}


Why is this happening?

Answer

You did not specify the class th. You must do <th class='th'> according to your CSS.

Or you can change your stylesheet: Just remove the dot in front of th.