CSS funktioniert nur für Tabelle und funktioniert nicht für Tabelle header (th)

Question

Ich hänge HTML dynamisch mit Javascript an und möchte etwas css zusammen mit dem HTML anhängen. In meinem Code wird nur die CSS für Tabelle vom Browser abgeholt, die CSS für th wird nicht angezeigt.

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

Warum ist das passiert?

Answer 1

Sie haben die Klasse th nicht angegeben. Sie müssen <th class='th'> gemäß Ihrem CSS tun.

Oder Sie können Ihr Stylesheet ändern: Entfernen Sie einfach den Punkt vor th.

Answer 2

Sie haben die .table Klasse, aber es gibt keine Klasse für .th

html += "<tr><th class='th'>"; 
    html += "Name: " + data.name; 
    html += "</th></tr>"; 

Vielleicht versuchen, die CSS zu

.table { 
border: 1px solid red; 

} ändern

th { 
/* not applied successfully */ 
color: red; 
} 

loszuwerden die Klassenkennung

Answer 3

Der Grund dafür ist, dass Sie keinen passenden CSS-Selektor für das Element <th haben. Die Auswahl, die Sie erwarten zu arbeiten, sucht nach Elementen, die eine Klasse von .th haben, aber es gibt keine.

Eine Lösung wäre es, die Klassenauswahl in Ihrem CSS zu entfernen und verwenden Sie nur das Element selbst:

th { 
    color: red 
} 

(Hinweis Es ist nicht dot)