How to fix each column width in a table

💬 Feature Requests
61

+1

62

Still continuing to track these +1s!

63

+1

I tried nesting a table in the expandable row(s) of another table, but getting the columns to align has been impossible. Fixed column widths would help.

1 Like
64

I still think this needs to be officially supported, but for those looking for a hacky solution, this solution helped me "fix" my columns to specific sizes. Using fixed pixel widths can lead to issues with responsiveness since the entire table width is set using the UI grid system, so I stuck with relative percentages.

App settings -> Custom CSS and do the following to pick out columns using nth-child selectors using the CSS 4 "of S syntax". I use the presence of the data-column-id attribute to identify column divs and not just any div. You just painstakingly write each column's width out.

If someone knows more, please let me know how I can improve this solution.

#table1--0 div[role="row"] :nth-child(1 of div[data-column-id]) {
  width: 25% !important;
}

#table1--0 div[role="row"] :nth-child(2 of div[data-column-id]) {
  width: 25% !important;
}

#table1--0 div[role="row"] :nth-child(3 of div[data-column-id]) {
  width: 25% !important;
}

#table1--0 div[role="row"] :nth-child(4 of div[data-column-id]) {
  width: 25% !important;
}
2 Likes
65

+1

66

Thanks for posting, @Abhilash_Nair! This was a huge help.

1 Like
67

+1

68

+1

69

Logging these +1s, thank you!

70

+1

71

+1

72

+1... Weird this is still an issue, I have a description column and every time I open the app it takes up the full width of the longest description. It's really annoying having to adjust it every time...

73

+1 !

Any news?

74

+1