Instructions for changing the background color of a value

Question

Instructions for changing the background color of a value

I'm working with a code that populates values in table columns, but the text displays in black color. I would like to highlight the text with a blue background.

Here is the HTML code snippet:

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

current output:

https://i.stack.imgur.com/oLFK9.png

Expected outcome should have only the highlighted text part.

I wish to display the output as shown below:

https://i.stack.imgur.com/VyZv1.png

html css servicenow

Answer 1

Answer №1

Enclose the value within a span element having a specific 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>

Answer 2

Enclose the value within a span element having a specific 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>

Answer 3

Answer №2

To select specific columns instead of the whole column, you can use :first-child or :nth-child(number) to choose how many columns you want. I have assigned each td column its own class so you can easily pick which ones you want to select for each column.

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

To select specific columns instead of the whole column, you can use :first-child or :nth-child(number) to choose how many columns you want. I have assigned each td column its own class so you can easily pick which ones you want to select for each column.

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

Answer №3

To achieve a highlighted effect, simply define a style for a specific class and adjust the background color accordingly:

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

After defining the class, you can assign it to any element that you wish to have a blue highlight.

Answer 6

To achieve a highlighted effect, simply define a style for a specific class and adjust the background color accordingly:

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

After defining the class, you can assign it to any element that you wish to have a blue highlight.

Instructions for changing the background color of a value

Answer №1

Answer №2

Answer №3

Similar questions

Having EventListeners set up across a single CSS class returns null when applied to different types of elements simultaneously

Using an npm package to include CSS styles in a stylesheet

What is the proper way to incorporate a hashtag (#) into a PHP parameter within a URL

Looking to tilt text at an angle inside a box? CSS can help achieve that effect!

Storing geographic locations in a variable by inputting an address

Turn off the background color box with a single click

Retrieve the DOM variable before it undergoes changes upon clicking the redirect button

Button Menu in HTML

Difficulty with routing stylesheets in my Node Express server

Adjust the image size to match the height of the frame

The status of the xmlhttp object remains unchanged

How to Customize Background Colors for Blogspot Posts?

Issue with JavaScript not generating a header element within a specified div

Creating a user-friendly navigation menu: A step-by-step guide

Maintaining hover effects even when elements are not in view

CSS class malfunction - various classes with identical functions

Tips on leveraging state values within the makeStyles function in Material UI React

What is the best way to show input choices once an option has been chosen from the 'select class' dropdown menu?

How to Display Full Lightbox Image on both Tall and Short Height Browsers

relocate the image with an identical filename stored in the variable