fix: Table misaligned when using Table Display Mode in FluentDataGrid

[bLinMil]

🐛 Bug Report

When I try to render a table using the display mode Table, the table doesn't render correctly.

💻 Repro or Code Sample

<FluentDataGrid TGridItem="Test" Items="testList.AsQueryable()" GenerateHeader="GenerateHeaderOption.Sticky">
    <TemplateColumn Sortable="true" Title="First Column Header"  Align="Align.Center" Width="200px" >
        @context.a
    </TemplateColumn>
    <TemplateColumn Sortable="true" Title="Second Column Header" Align="Align.Center" Width="200px">
        @context.b
    </TemplateColumn>
    <TemplateColumn Sortable="true" Title="Third Column Header" Align="Align.Center" Width="200px">
        @context.c
    </TemplateColumn>
</FluentDataGrid>

@code{
    class Test
    {
        public string a = "a";
        public string b = "b";
        public string c = "c";
    }

    private List<Test> testList = new()
    {
        new(),
        new(),
        new(),
        new(),
        new(),
        new(),
        new(),
        new(),
        new(),
        new(),
        new(),
        new(),
        new(),
        new(),
        new(),
        new(),
        new(),
        new(),
        new(),
        new(),
    };

    
}

🤔 Expected Behavior

Should still have the structure of a table

😯 Current Behavior

The headers are stacked on top of each other and the columns are squished together

🔦 Context

I am having the problem where if I have a lot of columns and scroll horizontally then vertically, the table (using virtualization) wont render the rows.
I was testing with a small example since I saw using the Table DisplayMode should fix this.

In my own personal example, I wasn't using fr units for the columns.

🌍 Your Environment

Windows
Edge
.Net 8.0.404, Fluent UI 4.11.1

[hml-coder]

The issue appears to be happening because display: flex on th is causing the browser to treat headers as flexible boxes instead of table cells and that breaks the table’s column structure causing the headers to be stacked vertically instead of aligning them in separate columns.

This should work.

<style>
    th {
        display: table-cell!important;
    }
</style>

It shouldn't affect anything in the header such as the sort icon because tr elements contains a single span.

[hml-coder]

I just realized that you already noticed the display: flex issue in #3151

[vnbaaij]

PR with fix for this is almost done.