topic Re: How to bold specific column headers in a table? in Splunk Search

How to bold specific column headers in a table?

DEADBEEF — Thu, 19 Jan 2023 22:55:10 GMT

I have a dashboard with a table with 6 headers. I would like to bold the text of the second, fourth, and fifth column headers. I searched around but could only find solutions for the first or last column headers (first-child, last-child) but nothing for anything in-between.

If bolding isn't an option, I would also be open to simply coloring the background of that column from the default gray to say blue and make the column header text white or something like that. The idea is to make the 2nd, 4th, and 5th column headers visually standout from the remaining in the table.

Example table:

index second source fourth fifth count

Re: How to bold specific column headers in a table?

ITWhisperer — Thu, 19 Jan 2023 23:37:00 GMT

Give your table an id e.g. "tableid" and add some CSS (note indexing starts at zero)

<panel depends="$stayhidden$"> <html> <style> #tableid table tbody td[data-cell-index="1"], #tableid table tbody td[data-cell-index="3"], #tableid table tbody td[data-cell-index="4"]{ font-weight: bold; } </style> </html> </panel>

Re: How to bold specific column headers in a table?

DEADBEEF — Thu, 19 Jan 2023 23:54:09 GMT

Hi @ITWhisperer , I tried what you described but I think something might be off. Here's my test dashboard, you should be able to run this:

<dashboard>
<label>test_css</label>
<row>
<panel>
<html depends="$stayhidden$">
<style>
#myTable1 table tbody td[data-cell-index="1"],
#myTable1 table tbody td[data-cell-index="2"],{
font-weight: bold;
}
</style>
</html>
</panel>
<panel>
<table id="myTable1">
<search>
<query>index="_internal" |stats count by index source host sourcetype</query>
<earliest>-5m@m</earliest>
<latest>now</latest>
</search>
<option name="drilldown">none</option>
</table>
</panel>
</row>
</dashboard>

Re: How to bold specific column headers in a table?

ITWhisperer — Fri, 20 Jan 2023 07:28:55 GMT

You have an extra comma before the opening brace of the style.

Re: How to bold specific column headers in a table?

DEADBEEF — Fri, 20 Jan 2023 16:24:36 GMT

Good catch! I removed the comma before the brace but still not working. Not sure what I am doing wrong here.

Re: How to bold specific column headers in a table?

ITWhisperer — Fri, 20 Jan 2023 16:30:27 GMT

Your example (without the extra comma) works for me. Which version of Splunk are you using? Do you have any other typos in your dashboard source?

Re: How to bold specific column headers in a table?

DEADBEEF — Fri, 20 Jan 2023 16:36:22 GMT

screenshot

Using Splunk Cloud 9.0.2208.4

<dashboard>
<label>test_css</label>
<row>
<panel>
<html depends="$stayhidden$">
<style>
#myTable1 table tbody td[data-cell-index="1"],
#myTable1 table tbody td[data-cell-index="2"]{
font-weight: bold;
}
</style>
</html>
</panel>
<panel>
<table id="myTable1">
<search>
<query>index="_internal" |stats count by index source host sourcetype</query>
<earliest>-5m@m</earliest>
<latest>now</latest>
</search>
<option name="drilldown">none</option>
</table>
</panel>
</row>
</dashboard>

Re: How to bold specific column headers in a table?

ITWhisperer — Fri, 20 Jan 2023 16:41:03 GMT

You could try adding !important

font-weight: bold !important;

to stop the style from being overridden by a later style.

Re: How to bold specific column headers in a table?

fredclown — Fri, 20 Jan 2023 19:24:30 GMT

Have you looked at the :nth-child() pseudo-class? You could specify the specific columns you want using that syntax.

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

Re: How to bold specific column headers in a table?

DEADBEEF — Fri, 20 Jan 2023 19:47:27 GMT

Tried adding the !important; , but nothing. I also setup the same dashboard on a local install of Splunk 8.8 and it also does not seem to work.

What version of Splunk do you have it where it is working?

Re: How to bold specific column headers in a table?

fredclown — Fri, 20 Jan 2023 20:15:51 GMT

I tried it on a 8.1.5 install and a 9.0.3 install and it worked. Below is the CSS I used.

/*Header*/ #myTable1 table thead th:nth-child(2), #myTable1 table thead th:nth-child(4), #myTable1 table thead th:nth-child(5) { font-weight: bold; } /*Body*/ #myTable1 table tbody td:nth-child(2), #myTable1 table tbody td:nth-child(4), #myTable1 table tbody td:nth-child(5) { font-weight: bold; }

Re: How to bold specific column headers in a table?

DEADBEEF — Fri, 20 Jan 2023 20:59:33 GMT

I don't understand css, but it works with and without the body section. Happy that it's working exactly how I wanted, thank you @fredclown

My final solution

<?xml version="1.0" encoding="UTF-8"?>
<dashboard>
<label>test_css</label>
<row>
<panel>
<html depends="$stayhidden$">
<style>
#myTable1 table thead th:nth-child(2),
#myTable1 table thead th:nth-child(3),
#myTable1 table thead th:nth-child(4) {
font-weight: bold;
}
</style>
</html>
</panel>
<panel>
<table id="myTable1">
<search>
<query>index="_internal" |stats count by index source host sourcetype</query>
<earliest>-5m@m</earliest>
<latest>now</latest>
</search>
<option name="drilldown">none</option>
</table>
</panel>
</row>
</dashboard>

Re: How to bold specific column headers in a table?

ITWhisperer — Fri, 20 Jan 2023 21:00:59 GMT

Which browser are you using?

Re: How to bold specific column headers in a table?

DEADBEEF — Fri, 20 Jan 2023 21:05:37 GMT

I actually did look at this, but thought you could only use even, odd, or math patterns. TIL, thank you.

Re: How to bold specific column headers in a table?

fredclown — Fri, 20 Jan 2023 22:42:42 GMT

You're welcome.

Re: How to bold specific column headers in a table?

fredclown — Fri, 20 Jan 2023 22:46:39 GMT

The body part was to bold the body of the table. The other CSS that @ITWhisperer was suggesting was also targeting the body of the table and not the head.