Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

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

$
0
0

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 { }

Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>