html - IE9 中的 td 最大宽度答案

【问题标题】：html - td max-width in IE9html - IE9 中的 td 最大宽度
【发布时间】：2013-01-28 14:17:45
【问题描述】：

我想限制表格中列的宽度。

<!DOCTYPE html>
<style type="text/css">
table tr td {border:1px solid; max-width:2em; overflow:hidden; white-space:nowrap;}
</style>
<table>
    <tr><td>this is looooooooo ooooooooo ooooooooooooo ooooooooo ng text</td></tr>
</table>

下一个代码在 Firefox 中运行良好（单元格宽度有限），但在 IE9 中宽度不受限制。

【问题讨论】：

stackoverflow.com/questions/5968779/…
我的代码包含建议的解决方案

标签： html internet-explorer-9

【解决方案1】：

您需要在 td 之后添加一个 div，如下所示在 HTML 中。 div 中的任何内容都不会延伸 table 单元格。

Demo

<!DOCTYPE html>
    <table>
      <tr>
        <td>
          <div>
            this is looooooooo ooooooooo ooooooooooooo ooooooooo ng text
          </div>
        </td>
      </tr>
    </table>

CSS：

table tr td {
    border:1px solid;
    max-width:2em;
    overflow:hidden;
    white-space:nowrap;
}

div {
  width: 2em;
}

在 IE8、Chrome 和 Firefox 中运行良好。

【讨论】：

表格是用jquery datatable生成的->我不能把单元格的内容放到div中。
@user1977315 你需要 white-space: nowrap 吗？

【解决方案2】：

尝试使用IE表达式width: expression(document.body.clientWidth > 901 ? "900px" : "auto");

【讨论】：

我正在寻找一种跨浏览器的解决方案（如果有的话..）。