May I know why my class "bold-header" styles didn't override to 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 expect this result: my expectation
but it gave me this: actual result
The background color is not working because we need to set background color on <td> element of first row. In your code, you are not selected corresponding td's.
The following changes are needed in second line of JS code:
d3.select("table").select("tr").selectAll("td").classed("bold-header", true);
UPDATE
I have understood the question and have updated the code, the another reason that your code is not working because you lightblue color is overriding the navy color. So, I would suggest you to select the header td tags and body td tags wisely. Please see the working code below
d3.select("table").selectAll("tr:not(:first-child)").style("background-color", "lightblue").style("width", "100px");
d3.select("table").select("tr").classed("bold-header", true); .bold-header{
background-color:navy;
color:white;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<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>