如何在值的背景设置颜色

Question

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

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

当前输出：

预计只突出显示文本部分。

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

Answer 1

如果你不想要整个专栏，你可以使用 :first-child 或 :nth-child(number) 到 select 但是你想要那个专栏有多少，我已经给了每个 td 专栏他们自己的 class，因此您可以为每一列选择您想要的 selected

<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>

Answer 2

您只需为 class 创建样式，然后更改 class 的背景颜色：

<style>
    .highlighted {
         background-color: blue;
         display: inline-block;
    }
</style>

然后您可以将 class 应用到任何您想要突出显示为蓝色的元素。

Answer 3

用 class.

将值包裹在一个范围内

.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>

如何在值的背景设置颜色

How to set color at the background of the value

html

css

servicenow