The table header's alignments seem completely random. Some are aligned to the left and others are aligned to the right. Is there a way to make them all the same? I know how to change the alignments of the cells but I want to change the headers.
@kdimaria, adding on the the point by @kmaron, Splunk adds following three classes to table data timestamp
, string
and numeric
. While timestamp
and string
columns are left aligned, numeric
columns are right aligned. And the behavior is same for both Table Header as Well Table Body (i.e. Data Rows). You can use CSS to apply your own style override for numeric
class to be aligned left
. Following code can be added to Simple XML Dashboard to align both Header and Body text to left for numeric
fields (where table id is tableWithCSSToAlignHeaderText
😞
<row depends="$alwaysHideCSSPanel$">
<panel>
<html>
<style>
#tableWithCSSToAlignHeaderText table thead th.numeric,#tableWithCSSToAlignHeaderText table tbody tr td.numeric{
text-align:left !important;
}
</style>
</html>
</panel>
</row>
Following is a run anywhere dashboard example in Simple XML based on Splunk's _internal index.
<dashboard>
<label>Table Column Header Alignment</label>
<row depends="$alwaysHideCSSPanel$">
<panel>
<html>
<style>
#tableWithCSSToAlignHeaderText table thead th.numeric,#tableWithCSSToAlignHeaderText table tbody tr td.numeric{
text-align:left !important;
}
</style>
</html>
</panel>
</row>
<row>
<panel>
<title>Table with CSS to Align Header Text</title>
<table id="tableWithCSSToAlignHeaderText">
<title>Splunk _internal Last 10 Errors</title>
<search>
<query>index=_internal sourcetype=splunkd log_level!=INFO
| bin _time span=1h
| stats count by _time component log_level
| head 10</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="count">20</option>
<option name="dataOverlayMode">none</option>
<option name="drilldown">none</option>
<option name="percentagesRow">false</option>
<option name="rowNumbers">true</option>
<option name="totalsRow">false</option>
<option name="wrap">true</option>
</table>
</panel>
</row>
</dashboard>
Alternative to above approach you can also move the following CSS code to a static CSS file and refer the same in your dashboard, after uploading to appserver/static folder. As stated earlier the table ID used in the following example is tableWithCSSToAlignHeaderText
:
#tableWithCSSToAlignHeaderText table thead th.numeric,#tableWithCSSToAlignHeaderText table tbody tr td.numeric{
text-align:left !important;
}
I believe the alignment has to do with the type of data in the field(s). Anything numeric will be right aligned.