我有一个在表列中设置值的代码，现在显示的文本具有黑色，但我想突出显示具有蓝色背景的文本下面是我当前的 HTML 代码 <body> <div class="container"> <table class="table table-responsive-sm table-bordered border-dark"> <caption style="caption-side: top;"> <h2 style="color:red">Country wise live updates</h2> </caption> <thead> <tr> <th scope="col">Country</th> <th scope="col">Total Affected</th> <th scope="col">Deaths</th> </tr> </thead> <tbody> <tr> <td>{{data.country}}</td> <td>{{data.total}}</td> <td>{{data.deaths}}</td> </tr> </tbody> </table> </div> </body>电流输出：预计仅突出显示文本部分。我想显示输出，如下所示：
3 回答
慕标琳琳
TA贡献1830条经验 获得超9个赞
用类将值包装在跨度中。
.table-cell-blue {
display: inline-block;
background-color: deepskyblue;
}
<body>
<div class="container">
<table class="table table-responsive-sm table-bordered border-dark">
<caption style="caption-side: top;">
<h2 style="color:red">Country wise live updates</h2>
</caption>
<thead>
<tr>
<th scope="col"><span class="table-cell-blue">Country</span></th>
<th scope="col">Total Affected</th>
<th scope="col">Deaths</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{data.country}}</td>
<td>{{data.total}}</td>
<td>{{data.deaths}}</td>
</tr>
</tbody>
</table>
</div>
</body>
弑天下
TA贡献1818条经验 获得超8个赞
如果您不想要整个列，您可以使用 :first-child 或 :nth-child(number) 来选择该列中您想要的任意数量，并且我已为每个 td 列提供了自己的类，以便您可以选择哪些您想要为每一列选择
<style>
.td-Country:nth-child(2){
background-color: dodgerblue;
}
</style>
<div class="container">
<table class="table table-responsive-sm table-bordered border-dark">
<caption style="caption-side: top;">
<h2 style="color:red">Country wise live updates</h2>
</caption>
<thead>
<tr>
<th scope="col">Country</th>
<th scope="col">Total Affected</th>
<th scope="col">Deaths</th>
</tr>
</thead>
<tbody>
<tr>
<td class="td-Countryt">{{data.country}}</td>
<td class="td-Total">{{data.total}}</td>
<td class="td-Deaths">{{data.deaths}}</td>
</tr>
</tbody>
</table>
</div>
侃侃尔雅
TA贡献1801条经验 获得超16个赞
您只需为一个类创建一个样式，然后更改该类的背景颜色：
<style>
.highlighted {
background-color: blue;
display: inline-block;
}
</style>
然后，您可以将该类应用于您想要突出显示为蓝色的任何元素。
- 3 回答
- 0 关注
- 93 浏览
添加回答
举报
0/150
提交
取消