Can anyone explain why the styles of my class "bold-header" did not override on the first row <tr> of the table?
HTML:
<style>
.bold-header{
background-color:navy;
color:white;
}
</style>
<table border="1">
<tr>
<td>ID</td>
<td>Name</td>
</tr>
<tr>
<td>001</td>
<td>John</td>
</tr>
<tr>
<td>002</td>
<td>Alex</td>
</tr>
<tr>
<td>003</td>
<td>Maxwell</td>
</tr>
</table>
Script:
d3.select("table").selectAll("td").style("background-color", "lightblue").style("width", "100px");
d3.select("table").select("tr").classed("bold-header", true);
I was hoping for this result: my expectation
but what I got was this: actual result