Changing css of knime table view

I am trying to use table view widget for a workflow. In it there is a column containing too many characters per row. This is causing each row to take too much space (10000-15000px). But I want to show only 500 px height of row height. I tried using overflow: hidden with knime-table-row and knime-table-cell. It is not changing anything at all. Any Idea how to fix this issue

Hello @harsh,

Thanks for your question!

It appears the styles you are trying to apply, while valid CSS, are not applied to HTML <table> elements on their own and require more styles.

There are a couple different approaches here when styling the table with large rows. For example, if you wanted scrollable cells, you could use:

.knime-table-cell {
   white-space: pre;
   max-width: 500px;
   overflow: scroll; 
}

This can be used with any combination of the text-overflow property to further refine the behavior.

If you are only concerned about the height, you could try some variation of:

.knime-table-cell {
  max-height: 500px;
  height: fit-content;
  white-space: pre;
}

The problem with styling the table comes down to HTML standards. Because the of the specification of the <table> HTML element, it is more restrictive with styling than other HTML elements, as the aim was to make the table fit the data (as opposed to styling it to manually). Hopefully one of these approaches provides you with an acceptable result. I think in both cases, you will need to adjust and/or combine with other styles to fine tune the appearance you are looking for.

Best,
Ben

1 Like

@blaney I tried it using css editor. It is not working. Can you provide a sample workflow.

Absolutely! Please see the attached.

table_css_overflow.knwf (8.7 KB)

3 Likes

Thanks for sharing this flow. But I just found it is not working with json column. Tried converting it to string but still it is there.

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