изменить цвет указанного столбца c в datatable - PullRequest
0 голосов
/ 20 марта 2020

Я пытаюсь настроить цвет по умолчанию Datatables . Мне удалось изменить цвет заголовка, как я желаю, и шрифт, но я не меняю цвет каждого столбца. Например, у меня есть столбец, в котором сообщается о количестве смертей, и я хочу, чтобы он был красным. В то же время я хочу убедиться, что мой цвет заголовка остается неизменным.

МОЙ HTML КОД

<table id="myTable"></table>
    <div id="loadingLabel">Loading...</div

JS КОД

const getNewCases = async() => {
  const response = await fetch('https://covid19.mathdro.id/api/daily/3-18-2020');
  const data = await response.json();
  let usa = data.filter(val => {
    return val.countryRegion === 'US';
  });
  $('#loadingLabel').hide();
  $('#myTable').DataTable({
    data: usa,
    bLengthChange: false,
    bPaginate: false,
    scrollY:        '50vh',
    columns: [
      { data: 'provinceState', title: 'State' },
      { data: 'countryRegion', title: 'Country' },
      { data: 'lastUpdate', title: 'Last Update' },
      { data: 'confirmed', title: 'Confirmed' },
      { data: 'deaths', title: 'Deaths' },
      { data: 'recovered', title: 'Recovered' }
    ]
  });
};
getNewCases();

CSS Код

thead {
  background-color: #2c3e4f;
  font-family: monospace;
  font-size: 20px;
  color: wheat;
}

Вот мой JSFIDDLE .

Ответы [ 2 ]

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

использование css nth-of-type

#myTable td:nth-of-type(5) {
  background-color:red;
}
1 голос
/ 20 марта 2020

Вы можете изменить цвет определенного столбца, используя nth-child

    tr td:nth-child(5) {
        background: red;
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...