Re: how to change the width of a column in a table...

anooshac · ‎05-30-2024

Hi All, i am trying reduce the width of 2nd and 3rd column of a table since some of the cell has big sentence and it occupies too much space.

i tried referring an example like below.

<row>
    <panel>
      <html depends="$alwaysHideCSSPanel$">
        <style>
          #tableColumWidth table thead tr th:nth-child(2),
          #tableColumWidth table thead tr th:nth-child(3){
            width: 10% !important;
            overflow-wrap: anywhere !important;
          }          
        </style>
      </html>
      <table id="tableColumWidth">

But i am not able to change the width using this. Any corrections needed in above html?

kamlesh_vaghela · ‎06-02-2024

@anooshac

Can you please try this sample code?

Please observe 2nd column width.

<dashboard version="1.1" theme="dark">
  <label>table column size</label>
  <row>
    <panel>
      <table id="tableColumWidth">
        <search>
          <query>|makeresults count=5 | eval A=random(), B=random(), status=A, action=A</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
  <row>
    <panel>
      <html>
        <style>
          
          #tableColumWidth table th:nth-child(2),
          #tableColumWidth table td:nth-child(2) {
            width: 1000px !important;
            overflow-wrap: anywhere !important;
        }
        </style>
      </html>
    </panel>
  </row>
</dashboard>

I hope this will help you.

Thanks
KV
An upvote would be appreciated if any of my replies help you solve the problem or gain knowledge.

anooshac · ‎06-03-2024

Hi @kamlesh_vaghela , tried this but the dashboard width isn't changing.

kamlesh_vaghela · ‎06-03-2024

@anooshac

Can you please share your full sample code?

KV

gcusello · ‎05-30-2024

Hi @anooshac ,

if you see in the Splunk Dashboard Examples app (https://splunkbase.splunk.com/app/1603 ) there's exactly also this example.

Ciao.

Giuseppe

ITWhisperer · ‎05-30-2024

The problem with tables is that the browser(?) tries to adjust the table after the CSS, which usually overrides whatever width you have tried to set.

anooshac · ‎06-02-2024

@ITWhisperer,so there is no solution for changing width?

ITWhisperer · ‎06-02-2024

It depends on what it is you are trying to achieve and what you would accept as a "solution". For example, you could try adding spaces to the end of field names so the column width increases. Basically, it is a lot of trial and error to get something close to what you want, and you might not get there, so perhaps you should ask yourself, is it worth the effort?

how to change the width of a column in a table?

CSS

table

Monitoring Postgres with OpenTelemetry

Mastering Synthetic Browser Testing: Pro Tips to Keep Your Web App Running Smoothly

Splunk Edge Processor | Popular Use Cases to Get Started with Edge Processor