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

Question

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

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

我试过width在TD上添加一个属性,但似乎没有效果.唯一有效的是设计由其呈现的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 */
}