我有一个像下面这样的表格:
<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: 100%
添加到您的 .ellipsis
样式中……根据 quirksmode.org 博客 (http://www.quirksmode.org/css/textoverflow.html) 上的这篇帖子,它可能有助于你的问题。
关于width - 设置带省略号的列的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10389784/