如何设置值的背景颜色
我有一个在表列中设置值的代码，现在显示的文本具有黑色，但我想突出显示具有蓝色背景的文本
下面是我当前的 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回答
-
慕标琳琳
用类将值包装在跨度中。.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> -
弑天下
如果您不想要整个列，您可以使用 :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> -
侃侃尔雅
您只需为一个类创建一个样式，然后更改该类的背景颜色：<style> .highlighted { background-color: blue; display: inline-block; }</style>然后，您可以将该类应用于您想要突出显示为蓝色的任何元素。
随时随地看视频慕课网APP
相关分类
Html5