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.