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

Question

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

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

我尝试在TD中添加width属性，但似乎没有效果。唯一有效的是设置由DisplayFor呈现的INPUT，但我不能在这里做，因为我无处设置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>**  

结果很好：