The dash-table exposes style_cell to style cells but trying to setup text ellipses on a cell by using

style_cell={
    "whiteSpace": "nowrap",
    "overflow": "hidden",
    "textOverflow": "ellipsis",
},

yields incorrect results. This is because the style_cell applies to the td element and the text is nested in a div element (class dash-cell-value) + the div element itself has display: flex to correctly align itself, but prevents ellipses.

One approach for the div to show ellipses when necessary, is to make it display inline | inline-block | block and adjust positioning accordingly. Furthermore, the div element should inherit white-space | overflow | text-overflow | word-wrap from its parent.

While this works, it's very specific to this div and this cell and may break easily.

We should explore if we can do away with the div entirely and put the text directly in the td element and if other approaches can work and apply to the dropdowns and inputs too.

This may also cause problems with the way the fixed headers & rows width gets coerced / calculated from the content.