溢出在此代码中不起作用

Question

我有一个包含项目的表。这些项目在x axis 中。我想通过在该表上添加一个水平滚动来处理溢出。

这是我的css

.agent-table-wrap {
    margin:0;
    padding:2px;
    /*margin-top:5px;*/
    margin-bottom:10px;
    margin-left:4%;
    font: 14px Arial,Helvetica,sans-serif;
    color:#747474;
    display: inline-block;
    padding-top:0px;
    /*background-color:#0c2a62;*/
    overflow:auto;
}

这是我的html：

<div class="thirdDiv">
                 <div class="slNewClass">
                     <div class="details">
                         <span class="content">Service Level</span>
                         <span class="value" id="slSpan" runat="server">0%</span>
                     </div>
                 </div>
                 <div class="agent-table-wrap">
                     <table id="agentsTable" runat="server">
                         <tr class="psdg-top" id="agentsNames">
                             <td class="title">Agent Name</td>
                         </tr>
                         <tr class="psdg-middle" id="agentsStatuses">
                             <td class="title">Agent Status</td>
                         </tr>
                     </table>
                 </div>
             </div>

但卷轴会出现在所有页面上，不仅仅是在桌子上

请检查：

溢出前：

溢出后：

Answer 1

您需要设置一个宽度，否则它将采用100% 的宽度。此外，您可能希望指定 overflow-x: scroll; 仅应用水平滚动。

.slNewClass {
   width: 15%;
}

.agent-table-wrap {
    width: 80%;
    margin:0;
    padding:2px;
    /*margin-top:5px;*/
    margin-bottom:10px;
    margin-left:4%;
    font: 14px Arial,Helvetica,sans-serif;
    color:#747474;
    display: inline-block;
    padding-top:0px;
    /*background-color:#0c2a62;*/
    overflow-x: scroll;
}

Answer 2

这就是你要找的东西

Fiddle

 .thirdDiv{max-height:200px; overflow:auto}