Custom CSS Stylesheet for Javascript Interactive Table

Greetings! I am using this simple script to adjust the width size for the Table View’s interactive display:

.knime-table-cell {
max-width: 75px;
}

The result became this:

The reason I experimented with the script is because the ‘Example’ column was too wide prior to the adjustment, making the last column to not fit within the screen. It looks okay now. But can someone assist me with a better script/workaround to get the desired display as follows:

  1. I’m not sure why the rest of the other columns are so wide when there are no other characters including spaces after the string values. I’d like to make them narrower.

  2. Is there a way to split the single-line format of the column headers into two lines for headers with more than two words, in order to make the columns narrower?

Thank you in advance!

Hi @badger101,

What you are doing with the css property that you have used, is defining the maximum width for a table cell. If you would like the widths to be adjusted to the content, you can set the following in the css editor: .knime-table{!white-space:nowrap;}

This should adjust the columns to the maximal width of its contents. Unfortunately, this means that for a longer header name, the column will be wider. In theory, it should be possible to have multiple lines for the contents of the header rows, but I haven’t been able to set it up myself (so I would recommend shortening the names or restructuring the table).

Best,
Karen

Thank you @kabrah , I was operating the workflow containing the table shown in the screenshot the other day, but I ended up not using the Table View Node for that workflow. But if I have other workflows where I require this node again and ran to a similar issue, I’ll definitely revisit this post to try that suggestion. Appreciate it.

Cheers.

1 Like

Glad to help, let us know if you get stuck! :slight_smile:

1 Like

Hi @kabrah , I’m on this new project where I’m using Tile View instead of a Table View. For this new node, I’m adjusting the height rather than the width.

Since I don’t see any manual option to adjust the height of the tiles, I tried using the above script by replacing the max-width with max-height. But it seems like any values I entered didn’t give any effect.

Example of script:

.knime-table-cell {
max-height: 350px;
}

Is it correct to assume that the Tile View node is designed to not allow the height to be adjusted? It’s a sore to my eyes to see these empty spaces before every new row :rofl:

1 Like

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.