用省略号设置列的宽度答案

【问题标题】：Setting width of a column with ellipsis用省略号设置列的宽度
【发布时间】：2012-05-10 12:18:26
【问题描述】：

我有一个如下表：

    <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">
                        francisco.voccio@envvio.com
                    </td>
                    <td class="column100 ellipsis">
                    1616161
                    </td>
                    <td class="column100 ellipsis">
                        SÃO PAULO
                    </td>
    </tr>

我希望它具有不同的宽度，具体取决于列。这是我的简化 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; 
      }

我希望它具有指定的宽度，如果内容更宽，省略号属性会对其生效。它在 Chrome 中运行良好。但是在 IE 中，我定义的宽度被忽略了，单元格采用了其中内容的宽度。

我正在使用 ASP MVC 3 的 WebGrid。我该怎么做才能让它在 IE 中也能工作？

【问题讨论】：

标签： width webgrid css

【解决方案1】：

尝试将 width: 100% 添加到您的 .ellipsis 样式中...根据 quirksmode.org 博客 (http://www.quirksmode.org/css/textoverflow.html) 上的此帖子，它可能有助于解决您的问题。

【讨论】：