Solved: Re: How to bold specific column headers in a table...

DEADBEEF · ‎01-19-2023

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

fredclown · ‎01-20-2023

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 · ‎01-20-2023

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

DEADBEEF · ‎01-20-2023

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

fredclown · ‎01-20-2023

You're welcome.

ITWhisperer · ‎01-19-2023

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>

DEADBEEF · ‎01-19-2023

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>

ITWhisperer · ‎01-19-2023

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

DEADBEEF · ‎01-20-2023

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

ITWhisperer · ‎01-20-2023

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?

DEADBEEF · ‎01-20-2023

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>

ITWhisperer · ‎01-20-2023

You could try adding !important

font-weight: bold !important;

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

DEADBEEF · ‎01-20-2023

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?

ITWhisperer · ‎01-20-2023

Which browser are you using?

fredclown · ‎01-20-2023

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 · ‎01-20-2023

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>

fredclown · ‎01-20-2023

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.

How to bold specific column headers in a table?

table

Webinar Recap | Revolutionizing IT Operations: The Transformative Power of AI and ML ...

.conf24 | Registration Open!

ICYMI - Check out the latest releases of Splunk Edge Processor