如何使用引导程序 4 和 html 助手在 html 表中设置列宽？

Question

我有一个非常简单的表格，有 2 列和一个额外的列，只是为了在 body 的 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 的方式工作会对您有所帮助。