Как установить цвет на фоне значения - PullRequest
Новая
       13

Как установить цвет на фоне значения

0 голосов
/ 28 марта 2020

У меня есть код, который устанавливает значения в столбцах таблицы, теперь для текста, который отображается черным цветом, но я хочу выделить текст на фоне синего цвета

Ниже мой текущий 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

Ожидается, что будет выделена только текстовая часть.

Я хочу отобразить вывод, как показано ниже:

enter image description here

Ответы [ 3 ]

1 голос
/ 29 марта 2020

Обернуть значение в интервале с классом. 

.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>
0 голосов
/ 28 марта 2020

Вы просто создадите стиль для класса, затем измените цвет фона этого класса: 

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

Затем вы примените этот класс к любому элементу, который вы хотите выделить синим.

0 голосов
/ 28 марта 2020

Если вам не нужен весь столбец, вы можете использовать: first-child или: nth-child (число), чтобы выбрать сколько вы хотите для этого столбца, и я дал каждому столбцу 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>
...