Question

如果表的内容长于我允许的大小，则其余内容将被隐藏。出于某种原因，当我使用bootstrap时，它不会隐藏溢出

我的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;
}

here is my JSFIDDLE

从“外部资源”中删除引导程序时，它可以正常工作。任何想法如何解决这个问题？适用于Chrome，但不适用于Firefox 22.0。

并且我的alert（）不会警告表的宽度为1170，而是警告div的宽度。

Answer 1

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

修改：实际上，如果<td>内容始终必须限制在一行，您可以white-space: nowrap使用<td>好好工作。在MBP上测试FF22。

编辑2：因此，在查看Bootstrap CSS文件后，我注意到了这一点：

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

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

无论如何，这仍然存在这样的问题：为什么Firefox和Chrome在给定相同内容时表现不同。在研究这个问题时，我看到了this SO question，这解释了为什么Chrome似乎忽略了max-width。

来自W3C Specification for Tables：

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

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

Answer 2

试试这个

overflow:hidden working

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

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

bootstrap overflow：隐藏在div中不起作用

2 个答案: