当浏览器最小化时，内容区域div上的表溢出

Question

请参阅此FIDDLE代码。

当浏览器最小化时，表溢出div。 另请注意，我导入的tableutils.js具有此代码，

    fixHeaderOptions : {
     width : 600; //i commented out this so table width is not set but still table overflow. 
    }

我希望输出的是在桌面区域上只有一个滚动条，如果浏览器最小化并且在 #content div 区域（具有灰色背景颜色的div）上没有溢出，当浏览器最大化时;我不希望任何滚动条显示在 #content div 。

非常感谢你们的任何帮助。

Answer 1

添加overflow：auto;在你的css文件中

   #mainContainer
   {
     min-width: 740px;
     padding: 0;
     margin: 0;
     overflow: auto; // add this
   }

如果您想要固定滚动条，请将“overflow：auto”更改为

overflow:scroll;

Answer 2

#outerDiv_searchMe{
width: 100%;
overflow: auto;
}

使用100％宽度确保自动调整大小属于浏览器。然后，当浏览器最小化时，它会使div的大小小于表格，因此滚动条将显示

Answer 3

这是我的工作小提琴：http://jsfiddle.net/chajadan/xm7ue6nf/16/

要使页面在最小化时给出水平滚动条，请在主内容div上设置高度。溢出：auto不需要让滚动条显示在需要时。

#mainContainer {
    min-width: 740px;
    padding: 0;
    margin: 0;
    height: 100%;
}

通过谷歌搜索＆＃34;最小宽度溢出：自动但没有滚动条＆＃34;我从这里得到了这部分答案：Css min-width no horizontal scroll bar is showing

我也进行了以下额外更改。

我还删除了searchMe表的宽度，因此表格不会任意宽，即使窗口大到足以适合表格数据，也可能导致滚动条。

<table id="searchMe" width="980px">

有两个中断元素也使表格数据变得更有用，我删除了它。

</div>
<br>
<br>

表格标题仍然没有与正文细胞对齐，但这并不是主要问题。