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!

Financial Services Industry Use Cases, ITSI Best Practices, and More New Articles ...

Splunk Lantern is a Splunk customer success center that provides advice from Splunk experts on valuable data ...

Splunk Federated Analytics for Amazon Security Lake

Thursday, November 21, 2024  |  11AM PT / 2PM ET Register Now Join our session to see the technical ...

Splunk With AppDynamics - Meet the New IT (And Engineering) Couple

Wednesday, November 20, 2024  |  10AM PT / 1PM ET Register Now Join us in this session to learn all about ...