html - 溢出在此代码中不起作用

Question

我有一个包含元素的表。这些元素位于 x 轴。我想通过在该表上添加水平卷轴来处理溢出。

这是我的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>

但是scrol变成了整个页面，不只是在 table 上

请检查:

溢出前:

溢出后:

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