How can I right-align my td elements in an MVC view using CSS?

Question

I am creating an Index page in an MVC 1.0 application and want to right-align the text in one of the columns. I have tried to do this by creating an extra class in the td style and setting the "text-align: right" in this but this doesn't appear to be being applied to that element.

In my CSS file I have:

table td
{
padding: 5px;
border: solid 1px #e8eef4;
}

table td.numeric
{
text-align: right;
}

In my view I have:

<table>
    <tr>
        <th>Location</th>
        <th>Duration</th>
    </tr>

    <% foreach (var item in Model) { %>
        <tr>
            <td><%= Html.Encode(item.Location.Description) %></td>
            <td class="numeric"><%= Html.Encode(itemDuration) %> min</td>
        </tr>
    <% } %>
</table>

Why wouldn't the text-align style be being used?

Answer 1

Make sure you are importing the style sheet in your view.

Answer 2

That should do it. Check for other conflicting styles in your stylesheet. If you're using a CSS reset, it might be in that.

Answer 3

It works for me. Are you sure you don't have another CSS property overriding this one?

Also, have you checked to make sure your table width is such that you can actually see that the second td is right aligned? My guess is that your table isn't expanding properly. Try changing it's tag to:

<table width="100%">