如何在值的背景上设置颜色

问题描述 投票：0回答：1

我有一个在表列中设置值的代码，现在对于显示为黑色的文本，但是我想用蓝色背景突出显示该文本

下面是我当前的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>

我想显示如下所示的输出：

enter image description here

html css servicenow
1个回答
0
投票
如果我理解正确，并且您需要将<td>输出突出显示为蓝色，请给他们一个类并为其分配背景颜色

<style> .td-Output { 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-Output">{{data.country}}</td> <td class="td-Output">{{data.total}}</td> <td class="td-Output">{{data.deaths}}</td> </tr> </tbody> </table> </div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.