我可以知道為什么我的類“粗體”樣式沒有覆寫到<tr>表格的第一行嗎？
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>
腳本：
d3.select("table").selectAll("td").style("background-color", "lightblue").style("width", "100px");
d3.select("table").select("tr").classed("bold-header", true);
我期待這個結果： 我的期待
但它給了我這個： 實際結果
uj5u.com熱心網友回復：
背景顏色不起作用，因為我們需要在<td>第一行的元素上設定背景顏色。在您的代碼中，您沒有選擇相應td's的 .
在第二行 JS 代碼中需要進行以下更改：
d3.select("table").select("tr").selectAll("td").classed("bold-header", true);
更新
我已經理解了這個問題并更新了代碼，這是您的代碼無法正常作業的另一個原因，因為您的淺藍色覆寫了海軍顏色。因此，我建議您明智地選擇標題 td 標簽和正文 td 標簽。請參閱下面的作業代碼
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/411395.html
標籤：
上一篇：防止影像擴展水平彈性框