I've created a simple table with two columns and an additional button in the body's td elements:
<table class="table table-hover">
<thead class="table-info">
<tr>
<th class="text-center">
@Html.DisplayNameFor(model => model.Code)
</th>
<th class="text-center">
@Html.DisplayNameFor(model => model.Name)
</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
@Html.EditorFor(model => model.Code)
</td>
<td>
@Html.EditorFor(model => model.Name)
</td>
<td>
<button type="button" class="btn btn-danger">Delete</button>
</td>
</tr>
</tbody>
</table>
The visual output can be seen here: image
However, I'd like the first column to occupy only 25% of the total table width. I have tried setting the th element with this value but it didn't work. Here is what I attempted:
<th class="text-center" style="width:25%;">
@Html.DisplayNameFor(model => model.Code)
</th>
I am using ASP.NET Core 2.1 + MVC + Razor.
It seems that the issue lies in the ASP.NET HTML helpers. How can I achieve the desired outcome?