overflow is not working in this code

Question

I have a table contains item. the items are in the x axis. I want to handle the overflow by adding a horizantal scrol on that table.

This is my 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;
}

This is my 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>

but the scrol becomes on all the page, not just on the table

check this please:

Before overflow:

enter image description here

After overflow:

enter image description here

Add a `width` or `max-width` for `overflow` to take effect. – Sirko Apr 19 '14 at 08:52 — Sirko, Apr 19 '14 at 08:52

score 1 · Answer 1 · answered Apr 19 '14 at 08:53

1

Is this what you are looking for

Fiddle

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

answered Apr 19 '14 at 08:53

San

1,237
1
14
29

your solution didn't help me. my problem not on the `thirdDiv` but in the table inside it. – user2208349 Apr 19 '14 at 08:55
this one http://stackoverflow.com/questions/14834198/table-scroll-with-html-and-css – San Apr 19 '14 at 08:57
+1 to your efforts with me. they another guy helped me – user2208349 Apr 19 '14 at 09:01

score 1 · Accepted Answer · answered Apr 19 '14 at 08:54

You will need to set a width otherwise it will adopt a width of 100%. Also you may wish to specify overflow-x: scroll; to apply scrolling horizontally only.

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

This works fine. +1. will accept the answer once the system allows — user2208349, Apr 19 '14 at 09:00

overflow is not working in this code

Before overflow:

After overflow:

2 Answers2