The UI Toolkit Table uses a Bootstrap table with fixed column widths taken from the column definitions; to size columns by their content, remove the fixed widths and let the browser lay out the table:
/* managed CSS asset included by the coach view or the page */
.myTable table { table-layout: auto !important; width: auto !important; }
.myTable th, .myTable td { white-space: nowrap; }- Leave the width of every column empty in the column settings and give the table the CSS class myTable (the Custom CSS class option). Columns then take the width of their widest content; add max-width on long text columns to avoid a horizontal scroll bar.
- To size on load from JavaScript (for example after a service fills the list), the table's On rendered event is the place to measure and set widths: iterate table.querySelectorAll("th") and set style.width from scrollWidth.
- Row height follows the content automatically; if rows look clipped, the culprit is a control inside the cell with a fixed height (Text with rows=1) - set height = auto on it.
- Responsive tables: the toolkit's Responsive option turns rows into stacked cards on small screens, which is the better fit than autofit on phones.
References