Splunk Search

How to bold specific column headers in a table?

DEADBEEF
Path Finder

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

Labels (1)
0 Karma
1 Solution

fredclown
Builder

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;
}

 

View solution in original post

fredclown
Builder

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

0 Karma

DEADBEEF
Path Finder

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

0 Karma

fredclown
Builder

You're welcome.

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

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>
0 Karma

DEADBEEF
Path Finder

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>

 

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

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

0 Karma

DEADBEEF
Path Finder

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

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

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?

0 Karma

DEADBEEF
Path Finder

screenshotscreenshot

 

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>

 

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

You could try adding !important

font-weight: bold !important;

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

0 Karma

DEADBEEF
Path Finder

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?

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

Which browser are you using?

0 Karma

fredclown
Builder

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;
}

 

DEADBEEF
Path Finder

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>

 

0 Karma

fredclown
Builder

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.

0 Karma
Get Updates on the Splunk Community!

New in Observability - Improvements to Custom Metrics SLOs, Log Observer Connect & ...

The latest enhancements to the Splunk observability portfolio deliver improved SLO management accuracy, better ...

Improve Data Pipelines Using Splunk Data Management

  Register Now   This Tech Talk will explore the pipeline management offerings Edge Processor and Ingest ...

3-2-1 Go! How Fast Can You Debug Microservices with Observability Cloud?

Register Join this Tech Talk to learn how unique features like Service Centric Views, Tag Spotlight, and ...