Bug - Table - mobile layout breaks alters table cell content layout unexpectedly

Describe the problem

PF tables on mobile change the Td display from table-cell to grid. This has a side effect on mobile layout where every immediate child of the cell becomes a new grid item and gets stacked and elongated. The way to counteract this is to ensure that we always nest a <div> or some other block element immediately within the cell before adding our contents.

For example here’s what happens if we render a Label with adjacent Icon: eg <Td><Label> <Icon></Td>

How do you reproduce the problem?
Using web inspector on the Table examples found here: https://www.patternfly.org/components/table
When the window width is small enough to render the mobile view, observe the grid layout is applied and all table cell children become grid items.

Expected behavior
By default, the contents of the cell should render the same on desktop and mobile. The dev should need to go out of their way to opt into this other behavior.

Is this issue blocking you?
The work around is to always render a <div> as a the first immediate child of the table cell before rendering the cell contents within the div.

What is your environment?

• OS: macos
• Browser chrome
• Version latest

What is your product and what release date are you targeting?
RHOAI

Any other information?

在链接的组件页面中的 PatternFly Table 示例里，使用窄浏览器窗口重现该问题，并检查 Td 布局。首先跟踪 Table/Td 的实现及其移动端网格行为。当 Label 和 Icon 等相邻的单元格内容在桌面端和移动端都能一致地渲染，且不要求使用者添加 wrapper 时，即视为完成。