How to apply background colors to Kibana tables in the same dashboard (or not)

问题

I have a challenge to implement colorized tables in a Kibana Dashboard and tried to find out the best approach in internet, but no glue up to now. So, since I wouldn't like to re-invent the wheels and create from scratch, I would like to hear from you an updated status for this implementation. By the way, I know that we can define a cell color based on its value, but it cannot be only the cell color, it must be all table lines or at least, one full line.

The challenge is to draw two simple tables in the same dashboard, one completely RED and a second all GREEN. Here is one table example: Report example

Have you have figured out some way to define the background color to the tables into a kibana dashboard, a kibana visualisation component or even by deployment level customization by HTML or CSS files customization?

回答1:

Here is one of the ways for solving this challenge. In order to figure out any additional formatting, I do suggest to use F12 in Chrome and debug some CSS statements.

CSS file to be changed:

/usr/share/kibana/optimize/bundles/light-theme.style.css

Let's consider the following tables titles

Table 1 title: "TOP_RED_TABLE"
Table 2 title: "BOTTON_GREEN_TABLE"

At the end of CSS file, add the following lines (replace the table titles below according with your definitions into the dashboard)

[data-title="TOP_RED_TABLE"],[data-test-subj="embeddablePanelHeading-TOP_RED_TABLE"] { background-color:red;
color:white; }

[data-title="BOTTON_GREEN_TABLE"], [data-test-subj="embeddablePanelHeading-BOTTON_GREEN_TABLE"] { background-color:green;
color:white; } .table thead { font-size: 14px; background-color:black; color:white; }

.embPanel__title:not(:empty) { font-size: 16px; }

Good luck with your kibana customizations and please, post here any additional suggestions.

Tks

Marcelo

来源：https://stackoverflow.com/questions/64066853/how-to-apply-background-colors-to-kibana-tables-in-the-same-dashboard-or-not

标签

kibana