Как установить ширину столбца в HTML-таблице с помощью Boostrap 4 и HTML-помощников?

Question

У меня есть очень простая таблица с 2 столбцами и еще одна, чтобы добавить кнопку в элементы td тела:

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

Это визуальный результат: image

Но я хочу, чтобы первый столбец был намного меньше второго, например 25% таблицы или что-то в этом роде.Я попытался установить для элемента th это значение, но результат остался прежним.Примерно так:

<th class="text-center" style="width:25%;">
    @Html.DisplayNameFor(model => model.Code)
</th> 

Я использую ASP.NET Core 2.1 + MVC + Razor

Я думаю, что основная проблема заключается в помощниках asp.net html.Как я могу выполнить ожидаемое поведение, пожалуйста?

Answer 1

Если вы хотите спроектировать таблицу и обрабатывать столбцы, используя HTML

, еще предложите спроектировать таблицу, используя Bootstrap, чтобы вы могли использовать мощность Bootstrap

Использование Bootstrap 4 Источник:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid bg-light">
	<div class="table col-12 mt-3 pt-2">
		<div class="row table-info">
			<div class="col-3 font-weight-bold text-center py-2">
				Code
			</div>
			<div class="col-7 font-weight-bold text-center py-2">
				Name
			</div>
			<div class="col-2 font-weight-bold text-center py-2">
				Action
			</div>
		</div>
		<div class="row d-flex flex-row justify-content-around py-2">
			<div class="col-3">
				<input type="text" class="h-100 w-100 px-2 border border-dark" value="User1" />
			</div>
			<div class="col-7">
				<input type="text" class="h-100 w-100 px-2 border border-dark" value="User2" />
			</div>
			<div class="col-2">
				<div class="btn btn-success w-100 text-center">Save</div>
			</div>
		</div>
		<div class="row d-flex flex-row justify-content-around py-2">
			<div class="col-3">
				<input type="text" class="h-100 w-100 px-2 border border-dark" />
			</div>
			<div class="col-7">
				<input type="text" class="h-100 w-100 px-2 border border-dark" />
			</div>
			<div class="col-2">
				<div class="btn btn-danger w-100 text-center">Delete</div>
			</div>
		</div>
	</div>
</div>

Надеюсь, что работа в Bootstrap поможет вам.