如何在MVC视图中设置表格列的宽度? [英] How can I set table column widths in an MVC view?

问题描述

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

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

我尝试将width属性添加到TD，但似乎没有效果.唯一有效的方法是对DisplayFor呈现的INPUT进行样式设置，但由于无法设置html属性，因此在这里我无法做到这一点.

解决方案

如果使用简单的HTML表，则应使用th标签将标题添加到列中，然后可以将其样式设置为所需的宽度./p>

例如:

<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 */
}

I am using the default, design-time scaffolded view for a list, in an MVC4 Razor app. Each column is as follows:

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

I have tried adding a width attribute to the TD's, but seems to have no effect. The only thing that works is styling the INPUT rendered by DisplayFor, but I can't do that here as I have nowhere to set html attributes.

解决方案

If you are using simple HTML tables, you should add a header to your columns using the th tag that can then be styled to the desired width.

For example:

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

can be used with this CSS code:

.col1 {
    width: 75%;
}

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

这篇关于如何在MVC视图中设置表格列的宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！