bootstrap's overflow:hidden in a div doesn't work

Question

If a table's content is longer than the allowed size of my the rest will be hidden. For some reason, when i use bootstrap, it doesnt hide overflow

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

my 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

when you remove bootstrap from the "External Resources" it works fine. any idea how to fix this? Works fine on Chrome, but not on firefox 22.0.

and my alert() doesn't alert the table's width which is 1170, instead it alert's the div's width.

Hmmm came across something similar the other day, give me a moment while i dig it up — Patsy Issa, Jul 19 '13 at 08:07

score 3 · Accepted Answer · edited May 23 '17 at 12:10

The source of the problem seems to be that firefox is ignoring your width: 1170px; on the table and using the width: 200px; on the wrapper. Adding a min-width: 1170px; to the table fixes your problem, but I can't be sure if this is acceptable without additional details.

Edit: Actually, if the <td> content always has to be restricted to a single line, you can use white-space: nowrap for the <td> and it should work properly. Tested in FF22 on a MBP.

Edit 2: So after looking through the Bootstrap CSS file, I noticed this:

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

Since Bootstrap sets a max-width: 100% on tables, the browser will ignore any width you set if it's greater than the width of the tables parent element. So removing the max-width, adding a min-width, or explicitly telling your browser that you don't want line breaks using white-space: nowrap will all fix your issue. I'd recommend just removing the max-width from Bootstrap if you don't need it.

Anyway, this still leaves the question of why Firefox and Chrome behave differently when given the same content. While looking into this, I saw this SO question, which explains why it seemed like the max-width was ignored by Chrome.

From the W3C Specification for Tables:

In terms of the visual formatting model, a table can behave like a block-level (for 'display: table') or inline-level (for 'display: inline-table') element.

Checking out the User Agent styles for Chrome and FF, they both add a display: table. So strictly following the specs, the overflow: hidden should be failing in both browsers. Looks like in this case, Chrome is misinterpreting the specs slightly, while FF is strictly adhering to it.

I don't have a specific answer as to why min-width works right now, but I'll do some digging and update my answer soon. Right after getting some food :D — godfrzero, Jul 19 '13 at 08:11

score 0 · Answer 2 · answered Jul 19 '13 at 07:41

0

try this

overflow:hidden working

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

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

answered Jul 19 '13 at 07:41

Falguni Panchal

8,873
3
27
33

nope, still don't work on firefox 22.0 and my alert() doesn't alert the table's width http://jsfiddle.net/RZQwb/12/ – srakl Jul 19 '13 at 07:47
don't know if this makes a diff but im using firefox on a mac? – srakl Jul 19 '13 at 07:55

bootstrap's overflow:hidden in a div doesn't work

2 Answers2