html - 如何在 MVC 视图中设置表格列宽？

Question

我在 MVC4 Razor 应用程序中使用列表的默认设计时脚手架视图。每列如下：

<td class="col-code">
    @Html.DisplayFor(modelItem => item.Code)
</td>

我曾尝试向widthTD 添加一个属性，但似乎没有效果。唯一可行的方法是对由 呈现的 INPUT 进行样式设置DisplayFor，但我不能在这里这样做，因为我无处设置 html 属性。

Answer 1

如果您使用的是简单的 HTML 表格，您应该使用th标签将标题添加到列中，然后可以将其样式设置为所需的宽度。

例如：

<table>
  <tr>
    <th class="col1">First col</th>
    <th class="col2">Second col</th>
  </tr>
  <tr>
    <td>First cell</td>
    <td>Second cell</td>
  </tr>
  <tr>
    <td>Third cell</td>
    <td>Fourth cell</td>
  </tr>
</table>

可以与此 CSS 代码一起使用：

.col1 {
    width: 75%;
}

.col2 {
    width: 25%; /* not very useful in this case as 'col2' will take the remaining */
}

Answer 2

您也可以在视图中使用它：

**@model List<Student>
@{
    ViewData["Title"] = "Index"; }
<h2>NEW VIEW Index</h2>
<table class="table">
    <tr>
        <th scope="col">
         ID          </th>
        <th scope="col">
            FirstName
        </th>
        <th scope="col">
            LastName
        </th>
     </tr>
     @foreach (var element in Model) {
    <tr>    <td>@Html.DisplayFor(m => element.ID)</td>  <td>@Html.DisplayFor(m => element.FirstName)</td>   <td>@Html.DisplayFor(m => element.LastName)</td>    </tr>
}
    </table>**  

结果很好：