【问题标题】:How can I convince IE to honor my explicit instructions to make a table column X pixels wide? [duplicate]我怎样才能说服 IE 遵守我的明确指示,使表格列 X 像素宽? [复制]
【发布时间】:2017-05-14 16:05:09
【问题描述】:

请考虑这个小而完整的 HTML 块:

<!DOCTYPE html >
<html>
<head>
    <title>Test</title>
    <style type="text/css">
    span {overflow:hidden; white-space:nowrap;  }
    td {overflow:hidden; text-overflow:ellipsis}
    </style>
</head>
<body>
    <table cellspacing="0"  >
        <tbody>
            <tr>
               <td nowrap="nowrap" style="max-width:30px; width:30px; white-space:nowrap; "><span>column 1</span></td>
               <td nowrap="nowrap" style="max-width:30px; width:30px; white-space:nowrap; "><span>column 2</span></td>
               <td nowrap="nowrap" style="max-width:30px; width:30px; white-space:nowrap; "><span>column 3</span></td> 
             </tr>
        </tbody>
    </table>
</body>
</html>

如果你在 Chrome 中渲染上面的内容,你会看到我正在寻找的效果。

但是在 IE8 或 9 中渲染它,宽度和/或最大宽度被忽略。

所以我的问题是如何让 IE 简单地让我明确指定单元格的宽度?

顺便说一句,我尝试了各种 table-layout:fixed 组合以及使用 colgroup 和 cols 等各种组合,但我没有尝试让 IE 相信我明确要求它明确执行的操作?

如果我在开始之前有头发的话,我现在已经没有了。

【问题讨论】:

  • 检查我更新的答案。
  • 我用的是windows,把IE9放到IE8文档兼容性里。 IE9 和 Chrome 具有相同的输出,而在 IE8 模式下,列会稍微变宽,尽管没有达到第一次失败的全部程度。
  • 顺便说一句,您可能会注意到,由于我无法理解的原因,这个问题已转移到 SO。以后我应该坚持 SO,而不是试图在“正确”网站上询问 Qs,因为似乎真的很难记住所有规则是什么:S

标签: html internet-explorer html-table


【解决方案1】:

试试这个,

<!DOCTYPE html >
<html>
<head>
    <title>Test</title>

    <style type="text/css">
   span
{
    display: inline-block;
    *display: inline;
    *zoom: 1;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    word-wrap: normal;
    max-width: 30px;
    vertical-align: bottom;
}

    </style>
</head>
<body>
    <table cellspacing="0"  >
        <tbody>
            <tr>
               <td nowrap="nowrap" style="max-width:30px; width:30px; white-space:nowrap;"><span>column 1</span></td>
               <td nowrap="nowrap" style="max-width:30px; width:30px; white-space:nowrap;"><span>column 2</span></td>
               <td nowrap="nowrap" style="max-width:30px; width:30px; white-space:nowrap;"><span>column 3</span></td> 
             </tr>
        </tbody>
    </table>
</body>
</html>

希望它有意义..

【讨论】:

  • 感谢接近但在 IE8 中不起作用。答案似乎是设置 enable table-layout:fixed and 指定表格为 0px 宽度。
  • 我正在使用 IE8 检查它在 Windows 上的工作正常。你在用mac吗?
猜你喜欢
  • 2013-11-02
  • 1970-01-01
  • 2019-09-19
  • 2019-04-09
  • 2019-07-17
  • 1970-01-01
  • 2020-10-29
  • 2019-05-27
  • 1970-01-01
相关资源
最近更新 更多