Splunk Search

Align the first column of the table

ashish9433
Communicator

Hi Team,

I have a table in the dashboard, wherein i want first column to be left aligned and rest all the columns to be center aligned as shown in the below image.

I want column Field1 all its data to be left aligned whereas other field(2-6) and its data to be center aligned. I used custom CSS as below.

#table1 .table-chrome.table-striped>tbody>tr.odd>td {
    text-align: center!important;
}

#table1 .table-chrome.table-striped>tbody>tr.even>td {
    text-align: center!important;
}

Using the above CSS all the columns are center aligned now and i am unable to find the CSS to just align the first column to left.

alt text

Can any one please guide me how do i left align first column and center align others in the table in a dashboard on Splunk?

0 Karma
1 Solution

ashish9433
Communicator

I am able to solve the issue by my self, adding the answer here so that incase anyone else faces a similar requirement.

I did this by just adding the following custom CSS for the respective table.

#table1 .table th, .table td {
    text-align: center!important;
}

#table1 .table td:first-child {
    text-align: left!important;
}

View solution in original post

ashish9433
Communicator

I am able to solve the issue by my self, adding the answer here so that incase anyone else faces a similar requirement.

I did this by just adding the following custom CSS for the respective table.

#table1 .table th, .table td {
    text-align: center!important;
}

#table1 .table td:first-child {
    text-align: left!important;
}

surekhasplunk
Communicator

Hi @ashish9433
which is your table name or reference to the table here ?

If i want to do it for all the tables then is there any specific code which i can just put in my .css file.

0 Karma

niketn
Legend

@surekhasplunk, table1 would be the table id set in Simple XML Dashboard code.

<table id="table1">
     ....
</table>

If you want to apply this for all tables you just need to take out #table1 from the CSS style code.

.table th, .table td {
     text-align: center!important;
 }

Just FYI, you should also know that whether text is left-aligned or right-aligned depends on whether the data entered is numeric or string i.e. for class="string" default left align and for class="numeric" right align:

td.numeric, th.numeric {
    text-align: right;
}
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

ashish9433
Communicator

@niketnilay Thanks for answering, you are perfectly correct!

0 Karma
Get Updates on the Splunk Community!

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...