Check screen width in Blazor

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

enter image description here

enter image description here

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>

enter image description here

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