¿Puedo saber por qué los estilos de "encabezado en negrita" de mi clase no se anularon en la primera fila <tr> de la tabla?
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>Guion:
d3.select("table").selectAll("td").style("background-color", "lightblue").style("width", "100px"); d3.select("table").select("tr").classed("bold-header", true);Espero este resultado: mi expectativa
pero me dio esto: resultado real
El color de fondo no funciona porque necesitamos establecer el color de fondo en el elemento <td> de la primera fila. En su código, no está seleccionado los td's correspondientes.
Se necesitan los siguientes cambios en la segunda línea del código JS:
d3.select("table").select("tr").selectAll("td").classed("bold-header", true);ACTUALIZAR
Entendí la pregunta y actualicé el código, la otra razón por la que su código no funciona porque su color azul claro está anulando el color azul marino. Por lo tanto, le sugiero que seleccione sabiamente las etiquetas td del encabezado y las etiquetas td del cuerpo. Por favor, vea el código de trabajo a continuación
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>