CSS to set column width of table

App Building
1

Hi,

I have a wide table in ReTool that I need to set wider column widths for, otherwise the headers and text are cut off, making it difficult to use for an end-user.

I tried setting the column widths manually via the UI, but ReTool "forgets" these settings after subsequent edits which is extremely frustrating.

How can I use CSS to automatically set the width of my columns? I'm trying in "Scripts and Styles" but all of my CSS is ignored:

._retool-table1 th,
._retool-table1 td {
  width: auto !important;
  white-space: nowrap;
}
2

Hi @COSmith Thanks for reaching out about this! We've definitely want to address this feedback by providing more settings both auto-guess the width and to allow editors to control the width (and have it persist). I don't have a timeline for when this will ship, but I'll post on this thread when we fix this!

In the meantime, setting the row height to "Dynamic" should automatically wrap longer text blocks:

The table should be creating tooltips for longer header text as well:

3

Hi @Tess. What about the column header - is there an option (or a CSS workaround) to wrap long-or-not multi-word headers ?
E.g. I wish I could force-display "Invoice Date" on 2 lines to make the column narrower.
Would be possible if Column title was evaluated as HTML (Invoice<br>Date) + would have its own alignment setting.

4

Hi @yiga2 this is also something we're working on & I'll post on this thread when I have an update.

I believe the only current solution would be custom css.

Something like this (with the class names that pertain to your specific table headers) --

5

Cool. Thanks @Tess ! Any further tip to apply to all headers at once ?
Note I am using the Legacy table where classes seem to be more generic ie. CSS would work if new columns are added or table gets re-created.

6

Hi @yiga2

I'd try this for the legacy table:

 .column-title {
  white-space: normal !important;
}
.rt-th {
  height:auto;
}

Custom css is definitely not an ideal solution for the long term, as it is tricky to set up & maintain. Hopefully we can ship something more natively supported!