Question

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.

Answer 1

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