0

我正在尝试在 IE9 中使用 max-width 属性。它被用于具有动态生成宽度的表格单元（我正在使用 dataTables）。我也在使用“文本溢出：省略号；” 所以它基本上具有在视觉上切断字符的效果，但如果没有最大宽度，我就无法做到这一点。

我不想在每个表格单元格上定义一个设置宽度，因为动态创建的在其他情况下都可以正常工作。

这是我的CSS：

.tableViewer tbody tr td {
max-width:220px;
overflow:hidden;
text-overflow: ellipsis;
 color: #000000;
font-size: 12px;
margin: 0 0 0 20px;
padding: 5px 5px 5px 10px;
border-left: 1px solid #fff;
border-right: 1px solid #ccc;
/*border-bottom:  1px solid #D8D8D8; */
 -webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}

如前所述，HTML 是通过 DataTables 生成的。但这里是它的呈现形式：

<tr class="odd">
<td class=" sorting_1" title="aaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbb@aaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbb.com" style="max-width: 220px; overflow: hidden; ">aaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbb@aaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbb.com</td>
<td class="" title="aaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbb" style="max-width: 220px; overflow: hidden; ">aaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbb</td><td class="" title="aaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbb" style="max-width: 220px; overflow: hidden; ">aaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbbaaaaabbbbb</td>
<td class="" title="" style="max-width: 220px; overflow: hidden; "></td><td class="" title="" style="max-width: 220px; overflow: hidden; "></td>
<td class="" title="" style="max-width: 220px; overflow: hidden; "></td><td class="" style="max-width: 220px; overflow: hidden; ">2 <a href="#">view</a></td></tr>

很抱歉标题很长，但这就是我试图弄清楚这一点的原因。有人有什么建议吗？

编辑：

根据要求，这是一个显示 CSS/HTML 和问题的 JSfiddle！http://jsfiddle.net/PY4cb/

4

1 回答 1

1

好的，所以我找到了答案（感谢@MrOBrian 的一些指针）——包含表需要有这个属性：

table-layout: fixed;

仅在 IE 中。出于某种原因，IE 不会接受没有此元素的表格中单元格的最大宽度（而所有其他浏览器都可以）。

于 2012-10-11T11:40:56.713 回答