Question

I have a table like this below:

    <tr>
                    <th scope="col">
                       Nome Completo
                    </th>
                    <th scope="col">
                        E-Mail
                    </th>
                    <th scope="col">
                        Matrícula
                    </th>
                    <th scope="col">
                        Filial
                    </th>
    </tr>

    <tr>
                    <td class="column50 ellipsis">
                        ANGUS MACGYVER
                    </td>
                    <td class="column150 ellipsis">
                        [e-mail]
                    </td>
                    <td class="column100 ellipsis">
                    1616161
                    </td>
                    <td class="column100 ellipsis">
                        SÃO PAULO
                    </td>
    </tr>

I want it to have different widths, depending on the column. Here’s my simplified CSS:

.general_webgrid table
{
    table-layout: fixed;
    border-spacing: 1px;
    padding-bottom: 3px;
}
     .general_webgrid table td.column50
        {
            width: 50px;
            max-width: 50px;
        }
    .general_webgrid table td.column150
        {
            width: 150px;
            max-width: 150px;
        }
        .general_webgrid table td.column100
    {
        width: 100px;
        max-width: 100px;
    }

    .ellipsis
    {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap; 
      }

I want it to have a specified width and if the content is wider, the ellipsis properties take effect on it.
It worked well in Chrome. But in IE, the width I defined is ignored and the cell takes the width of the content inside it.

I’m using the WebGrid of ASP MVC 3.
What can I do to make it work in IE too?

Answer 1

Try adding width: 100% to your .ellipsis style … per this posting on the quirksmode.org blog (http://www.quirksmode.org/css/textoverflow.html), it might help with your problem.