我有一张如下表:
<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中运行呢?
答案 0 :(得分:1)
尝试将width: 100%
添加到您的.ellipsis
样式中...根据quirksmode.org博客(http://www.quirksmode.org/css/textoverflow.html)上的这篇帖子,它可能有助于解决您的问题。