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

75

+1

76

+1 for this,

I have multiple clients who needs this feature , please prioritize this

1 Like
77

+1

2 Likes
78

I've noted all the interest in this particular feature and updated our internal tracking accordingly!

Something that not a lot of people know, though, is that it technically is possible to set the pixel width of table columns. There's no UI for it, but the pixel width of columns is set when making a new release and persists across all users and devices until the next release is made.

This obviously isn't the best user experience and I would personally love to see both a UI for doing the above and the ability to set percent widths, but I thought I'd share!

2 Likes
79

Alright, this seems to work for me, but now with resize columns in the header, you have to use odd numbers for the columnheader divs like this

/* Suppose you have 4 columns, this is for column 1 */
#table--0 div[role="row"] > div[role="columnheader"]:nth-child(1),
#table--0 div[role="row"] > div[role="gridcell"]:nth-child(1) {
    width: 25% !important;
}
/* Column 2 */
#table--0 div[role="row"] > div[role="columnheader"]:nth-child(3),
#table--0 div[role="row"] > div[role="gridcell"]:nth-child(2) {
    width: 25% !important;
}
/* Column 3 */
#table--0 div[role="row"] > div[role="columnheader"]:nth-child(5),
#table--0 div[role="row"] > div[role="gridcell"]:nth-child(3) {
    width: 25% !important;
}
/* Column 4 */
#table--0 div[role="row"] > div[role="columnheader"]:nth-child(7),
#table--0 div[role="row"] > div[role="gridcell"]:nth-child(4) {
    width: 25% !important;
}

apologies for the many edits, kept making typos. hopefully this works for folks.

1 Like