1

如果表格的内容长于我的允许大小，其余部分将被隐藏。出于某种原因，当我使用引导程序时，它不会隐藏溢出

我的 html

   <div id="wrapper">
        <table class="tabel_basisgegevens" border="5">
            <tr><td>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20</td></tr>
        </table>
    </div>

我的 CSS

.tabel_basisgegevens{
    height:30px;
    width: 1170px;
    color:white;
    background:red;

}    
#wrapper {
    position:absolute; 
    border:1px; 
    border-color:blue;
    width: 200px;
    overflow: hidden;
}

这是我的 JSFIDDLE

当您从“外部资源”中删除引导程序时，它工作正常。知道如何解决这个问题吗？在 Chrome 上运行良好，但在 Firefox 22.0 上运行良好。

我的 alert() 不会提醒表格的宽度为 1170，而是提醒 div 的宽度。

4

2 回答 2

3

问题的根源似乎是firefox忽略了你width: 1170px;的桌面并使用width: 200px;了包装器。将 a 添加min-width: 1170px;到表中可以解决您的问题，但如果没有其他详细信息，我无法确定这是否可以接受。

编辑：实际上，如果必须<td>始终将内容限制为一行，则可以使用white-space: nowrapfor<td>并且它应该可以正常工作。在 MBP 上在 FF22 中测试。

编辑 2：所以在浏览了 Bootstrap CSS 文件后，我注意到了这一点：

table {
    background-color: transparent;
    border-collapse: collapse;
    border-spacing: 0;
    max-width: 100%;
}

由于 Bootstrapmax-width: 100%在表格上设置了 a，如果您设置的宽度大于表格父元素的宽度，浏览器将忽略它。因此，删除max-width、 添加min-width或 明确告诉您的浏览器您不希望使用换行符white-space: nowrap都可以解决您的问题。max-width如果您不需要它，我建议您从 Bootstrap 中删除它。

无论如何，这仍然留下了为什么 Firefox 和 Chrome 在给定相同内容时表现不同的问题。在调查这个问题时，我看到了这个 SO question，这解释了为什么它似乎max-width被 Chrome 忽略了。

来自W3C 表格规范：

就可视格式化模型而言，表格可以表现得像块级（对于'display: table'）或内联级（对于'display: inline-table'）元素。

查看 Chrome 和 FF 的用户代理样式，它们都添加了display: table. 因此严格遵循规范，overflow: hidden应该在两个浏览器中都失败。看起来在这种情况下，Chrome 稍微曲解了规范，而 FF 则严格遵守规范。

于 2013-07-19T07:54:32.993 回答
0

尝试这个

overflow:hidden working

http://jsfiddle.net/RZQwb/9/

 #wrapper {position:absolute; 
           border:1px solid blue;  
          width:200px;
          overflow:hidden;
    }
于 2013-07-19T07:41:14.103 回答