Check screen width in Blazor

Question

Currently I use MudBlazor's MudTable and display a list of 3 columns, but when displaying the widths of the 3 columns are not equal. I used the CSS "width: calc(100% / 3)" and the 3 columns displayed the same thing.

ListEmpoyee.razor

<style>
    .mud-table th,
    .mud-table td {
        width: calc(100% / 3);
    }
</style>

<MudTable Items="@GetEmployees()" Striped="true" Bordered="true">
    <HeaderContent>
        <MudTh>
            First Name
        </MudTh>
        <MudTh>
            Last Name
        </MudTh>
        <MudTh>
            Phone
        </MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="FirstName">@context.FirstName</MudTd>
        <MudTd DataLabel="LastName">@context.LastName</MudTd>
        <MudTd DataLabel="LastName">@context.Phone</MudTd>
    </RowTemplate>
</MudTable>

@code {
    private Employee employee = new Employee();
    private List<Employee> employees = new List<Employee>();

    private List<Employee> GetEmployees()
    {
        employees = employee.GetAll();
        return employees;
    }
}

Employee.cs

public string FirstName { get; set; } = "";
    public string LastName { get; set; } = "";
    public string Phone { get; set; } = "123456789";

    public List<Employee> GetAll()
    {
        List<Employee> list = new List<Employee>();

        for (int i = 1; i <= 50; i++)
        {
            list.Add(new Employee()
            {
                ID = i,
                FirstName = "First name " + i,
                LastName = "Last name " + i
            });
            
        }

        return list;
    }

The problem I'm having here is that when I shrink the screen to 500px, the MudTable doesn't display properly.

I used "@media (min-width: 500px)" to check when the screen is from 500px onwards to format according to CSS, but the code reported an error.

<style>
    @media (min-width: 500px) {
    .mud-table td {
        width: calc(100% / 3);
    }
}
</style>

If you have a solution, please help me. Sincere thanks very much.

Answer 1

Refer to the MudBlazor documentation for the table component. Note the line - The table can be prevented from breaking into mobile layout by setting the Breakpoint to Breakpoint.None. the second image you show where you state that the table is not displaying correctly, is actually the mobile layout for table.

As documented, simply set Breakpoint = Breakpoint.None on the component to disable this.