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

Identifying the method of navigation using PerformanceNavigationTiming

The Angular checked functionality is not working as expected due to the presence of ngModel

JavaScript and Angular are used to activate form validation

When completing a form submission, make sure to eliminate the %5B%5D from the

Tips for eliminating the shadow effect from a textbox using CSS

Choose the immediate sibling located right after a specific element

What is the best way to display the elements of an array within an HTML div element?

Easily updating a SQL row with the click of an HTML button using PHP

How can I replicate the functionality of a div mimicking a select element using javascript upon clicking away from the element?

Tips for increasing the size of a parent div when a child div is displayed with a set width?

Uncover each image individually

Utilize CSS to display line breaks within a browser output

Eliminate the mystery overflow in your CSS styling

Is it feasible to automate the cropping process with selenium?

Function activation in Element requires a double click to initiate

Troubleshooting a Cache Issue in Your Next.js Application

JavaScript Date Validation: Ensuring Proper Dates

PHP Script unable to locate results

Ways to obtain an attribute through random selection

Incorporate a notification into the Windows notification center without it being visibly displayed on the desktop