Align UIKit Dynamic Table Cells to Top

I have fairly long cell contents, and I would like to align the contents to the top. I’ve tried using the Box Stack and Inline components, but it looks like the CSS at the td level is the issue. Even the “grow” property in the box doesn’t let it fill the space. I’m not the best at CSS, so please advise if I’m missing something.
My last try:


                {
                    key: createKey(line.data),
                    content:
                    // <Box paddingBlockStart="space.050" paddingInlineStart="space.050"><Stack alignInline="start" alignBlock="start" grow="fill">{line.data}</Stack></Box>,
    <Box margin="space.050"><Stack alignInline="start" alignBlock="start" grow="fill"><Inline alignInline="start" alignBlock="start" paddingBlockStart="space.050" paddingInlineStart="space.050">{line.data}</Inline></Stack></Box>,

                },

DynamicTable renders to a typical HTML <table> that contains a <tbody> and it seems like vertical-align is default to middle for most user agents / browsers which both <tr> and <td> inherits. I too can’t find an easy way to override that with current version of UI Kit (@forge/react v10.1.1) using DynamicTable props or xcss. Hope that this use case could be supported in future.

1 Like

I have the same issue. I use DynamicTable and some cells contain more content with some line breaks. And then the other cells I would like to align to top.

But don’t know how to do this.

I would also like to align cell content to the top.