英文:
Tabulator header color
问题
Tabulator不接受标题颜色更改
通过以下CSS，我试图更改所有列的标题颜色，但我没有得到这个调整
尝试这样做，但没有效果。
我使用vue3 + vite + Tabulator 5.4
<style scoped>
.tabulator {
font-size: 12px;
width: 100%;
}
.tabulator .tabulator-header,
.tabulator-col .headerBackgroundColor {
background-color: #acacac;
}
</style>
这是我的Tabulator
tabulator.value = new Tabulator('#tabulator', {
data: dataRelatorio.value,
layout: 'fitColumns',
autoResize: true,
pagination: 'local',
paginationSize: 20,
rowHeight: 25,
paginationSizeSelector: [10, 20, 30, 50, 100, 200, 500, 1000],
movableColumns: true,
paginationCounter: 'rows',
responsiveLayout: 'hide',
placeholder: '未找到记录',
locale: 'pt-BR',
langs: {
'pt-BR': {
pagination: {
page_title: '显示页面',
first: '第一页',
first_title: '第一页',
last: '下一页',
last_title: '下一页',
prev: '上一页',
prev_title: '上一页',
next: '下一页',
next_title: '下一页',
all: '全部',
},
},
},
columns: columns,
rowFormatter: function (row) {
//console.log(row.getData());
if (row.getData().in_delayed === 'delayed') {
const children = row.getElement().childNodes;
children.forEach((child) => {
child.style.backgroundColor = '#FFFACD';
});
}
},
});
请注意，代码部分未进行翻译。
英文:
Tabulator does not accept header color change
Through the css below, I'm trying to change the header color of all my columns, but I'm not getting this adjustment
tried to do it this way but it's not going.
I use vue3 + vite + tabulator 5.4
<style scoped>
.tabulator {
font-size: 12px;
width: 100%;
}
.tabulator .tabulator-header,
.tabulator-col .headerBackgroundColor {
background-color: #acacac;
}
</style>
this is my tabulator
tabulator.value = new Tabulator('#tabulator', {
data: dataRelatorio.value,
layout: 'fitColumns',
autoResize: true,
pagination: 'local',
paginationSize: 20,
rowHeight: 25,
paginationSizeSelector: [10, 20, 30, 50, 100, 200, 500, 1000],
movableColumns: true,
paginationCounter: 'rows',
responsiveLayout: 'hide',
placeholder: 'No record found',
locale: 'pt-BR',
langs: {
'pt-BR': {
pagination: {
page_title: 'Show page',
first: 'First',
first_title: 'First page',
last: 'Next',
last_title: 'Next page',
prev: 'Previous',
prev_title: 'Previous page',
next: 'Next',
next_title: 'Next Page',
all: 'All',
},
},
},
columns: columns,
rowFormatter: function (row) {
//console.log(row.getData());
if (row.getData().in_delayed === 'delayed') {
const children = row.getElement().childNodes;
children.forEach((child) => {
child.style.backgroundColor = '#FFFACD';
});
}
},
});
答案1
得分: 0
这应该可以工作：
<style>
.tabulator .tabulator-header .tabulator-col {
background-color: #acacac;
}
</style>
注意:
- 我没有在
<style>标签上使用scoped指令。 - 你可以在组件中拥有多个
<style>标签，一些使用scoped，一些不使用。不使用scoped的那些是普通的CSS，它们适用于整个DOM。 - 你也可以将上述样式应用在
scoped样式标签内。选择器很可能是.tabulator :deep(.tabulator-header .tabulator-col)，但在你提供一个可运行的最小示例之前，我无法确定。这样我可以检查它。
英文:
This should work:
<style>
.tabulator .tabulator-header .tabulator-col {
background-color: #acacac;
}
</style>
Notes:
- I didn't use the
scopeddirective on<style>tag. - you can have more than one
<style>tag in a component, somescopedand some regular. The regular ones are "normal" CSS, they apply to the entire DOM. - you can also apply the above styles inside a
scopedstyle tag. The selector would most likely be.tabulator :deep(.tabulator-header .tabulator-col), but I can't know for sure until you provide a runnable minimal example, so I could inspect it.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论