首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >更改datatable中特定列的颜色

更改datatable中特定列的颜色
EN

Stack Overflow用户
提问于 2020-03-20 19:18:11
回答 2查看 748关注 0票数 0

我正在尝试自定义默认数据表的颜色。我设法改变了标题的颜色和字体,但我没有改变每一列的颜色。例如,我有一栏报告总死亡人数,我希望它是红色的。同时,我想确保我的标题颜色保持不变。

我的HTML代码

代码语言:javascript
运行
复制
<table id="myTable"></table>
    <div id="loadingLabel">Loading...</div

JS码

代码语言:javascript
运行
复制
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代码

代码语言:javascript
运行
复制
thead {
  background-color: #2c3e4f;
  font-family: monospace;
  font-size: 20px;
  color: wheat;
}

这是我的JSFIDDLE

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-03-20 19:27:21

使用css nth-of类型

代码语言:javascript
运行
复制
#myTable td:nth-of-type(5) {
  background-color:red;
}
票数 1
EN

Stack Overflow用户

发布于 2020-03-20 19:25:50

您可以使用nth-child更改特定列的颜色。

代码语言:javascript
运行
复制
    tr td:nth-child(5) {
        background: red;
    }
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/60780363

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档