Why MudBlazor example does not work for three-level table header

Question

My starting point is the example in the documentation: https://www.mudblazor.com/components/table#header-and-footer

The main problem is that the data cells are not aligned at all with the leaf cells. For example, data cell R1 -1.1 is not fully under 1.1 in the header, data cell R1 - 1.2.1 is not under 1.2.1 and so on. Same table implemented in plain html works as expected.

I tried using with five of equal width - did not help.

Thank you!

My table:

@page "/plaintable"
@using MudBlazor

<MudTable T="int"
            Items="Enumerable.Range(1, 50)"
            FixedHeader="false"
            Class="tree-table"
            Hover="true" Breakpoint="Breakpoint.Sm" Striped="true" Bordered="true"
            CustomHeader="true">

        <!-- Multi-level header -->
        <HeaderContent>
            <!-- Row 0 -->
            <MudTHeadRow Class="header-centered">
                <MudTh ColSpan="5">1</MudTh>
            </MudTHeadRow>
        <!-- Row 1 -->
            <MudTHeadRow Class="header-centered">
                <MudTh RowSpan="3">1.1</MudTh>
                <MudTh ColSpan="4">1.2</MudTh>
            </MudTHeadRow>
            <!-- Row 2 -->
            <MudTHeadRow Class="header-centered">
                <MudTh RowSpan="2">1.2.1</MudTh>
                <MudTh ColSpan="2">1.2.2</MudTh>
                <MudTh RowSpan="2">1.2.3</MudTh>
            </MudTHeadRow>
        <!-- Row 3 -->
            <MudTHeadRow>
                <MudTh>1.2.2.1</MudTh>
                <MudTh>1.2.2.2</MudTh>
            </MudTHeadRow>
        </HeaderContent>

        <!-- Body rows -->
        <RowTemplate>
            <MudTr>
            <MudTd>@($"R{context} - 1.1")</MudTd>
            <MudTd>@($"R{context} - 1.2.1")</MudTd>
            <MudTd>@($"R{context} - 1.2.2.1")</MudTd>
            <MudTd>@($"R{context} - 1.2.2.2")</MudTd>
            <MudTd>@($"R{context} - 1.2.3")</MudTd>
            </MudTr>
        </RowTemplate>
    </MudTable>

<style type="text/css">
    .mud-table-head .header-centered th {
        text-align: center;
        font-size: 1.2em;
    }

    .mud-table-cell {
        font-weight: 500;
    }
</style>

@code { }

Is this what you want? try.mudblazor.com/snippet/cOmzOZFzIKtfaVzM — RBee
– RBee, Commented Sep 15 at 13:02
Yes. Yes! Thank you! One small thing - there are no vertical borders in header cells 1.1, 1.2.1 , 1.2.2 and 1.2.2.2 — Michael EstrinOne
– Michael EstrinOne, Commented Sep 15 at 16:03
Try looking at the api for the components otherwise you'll have to use custom css — RBee
– RBee, Commented Sep 15 at 16:09

RBee · Accepted Answer · 2025-09-20 15:27:03Z

You need to remove the <MudTr> in <RowTemplate>. Then the alignment should work.

However, the borders for all the headers are missing. To add the borders to the headers we can use HeaderClass="table-head-bordered".

There is another issue now, we can see that the right border between 1.2.2.2 and 1.2.3 is missing. This is because of the MudTable's styles.

.mud-table-bordered 
.mud-table-container 
.mud-table-root 
.mud-table-head.table-head-bordered 
.mud-table-row 
.mud-table-cell:not(:last-child) {
    border-right: 1px solid var(--mud-palette-table-lines)
}

Since 1.2.2.2 is the last child, it omits the right border.

So we need to override the built in css for that border to show up.

<!-- Row 3 -->
<MudTHeadRow>
    <MudTh>1.2.2.1</MudTh>
    <MudTh Class="last-cell-right-border">1.2.2.2</MudTh>
</MudTHeadRow>

.last-cell-right-border{
    border-right: 1px solid var(--mud-palette-table-lines);
}

MudBlazor Snippet

Full code

@using MudBlazor

<MudTable T="int"
            Items="Enumerable.Range(1, 50)"
            FixedHeader="false"
            Class="tree-table"
            Hover="true" Breakpoint="Breakpoint.Sm" Striped="true" Bordered="true"
            CustomHeader="true"
            HeaderClass="table-head-bordered"
            >
        <!-- Multi-level header -->
        <HeaderContent>
            <!-- Row 0 -->
            <MudTHeadRow Class="header-centered">
                <MudTh ColSpan="5">1</MudTh>
            </MudTHeadRow>
        <!-- Row 1 -->
            <MudTHeadRow Class="header-centered">
                <MudTh RowSpan="3">1.1</MudTh>
                <MudTh ColSpan="4">1.2</MudTh>
            </MudTHeadRow>
        <!-- Row 2 -->
            <MudTHeadRow Class="header-centered">
                <MudTh RowSpan="2">1.2.1</MudTh>
                <MudTh ColSpan="2">1.2.2</MudTh>
                <MudTh RowSpan="2" >1.2.3</MudTh>
            </MudTHeadRow>
        <!-- Row 3 -->
            <MudTHeadRow>
                <MudTh>1.2.2.1</MudTh>
                <MudTh Class="last-cell-right-border">1.2.2.2</MudTh>
            </MudTHeadRow>
        </HeaderContent>
        <!-- Body rows -->
        <RowTemplate>
            <MudTd>@($"R{context} - 1.1")</MudTd>
            <MudTd>@($"R{context} - 1.2.1")</MudTd>
            <MudTd>@($"R{context} - 1.2.2.1")</MudTd>
            <MudTd>@($"R{context} - 1.2.2.2")</MudTd>
            <MudTd>@($"R{context} - 1.2.3")</MudTd>
        </RowTemplate>
    </MudTable>

<style type="text/css">
    .mud-table-head .header-centered th {
        text-align: center;
        font-size: 1.2em;
    }
    .mud-table-cell {
        font-weight: 500;
    }
    .last-cell-right-border{
        border-right: 1px solid var(--mud-palette-table-lines);
    }
</style>

@code { }

Collectives™ on Stack Overflow

Why MudBlazor example does not work for three-level table header

1 Answer 1

Full code

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Full code

Comments

Related