Overflow: auto does not work in Firefox

Question

I have a table. Its <td> have overflow: auto.

The width is set to be 100px. In Firefox only, text that exceeds 100px is not hidden and replaced with a scrollbar.

How can I hide content and have a scrollbar when it exceeds the width of its container?

http://jsfiddle.net/be6tM/10/

Solution 1

this question from here maybe solve your problem

nickb answer: "Try wrapping it in a <div>. I'm pretty sure the overflow attribute is not defined for a <td> element, at least in HTML4 it's not."

try to put your overflow:auto to the wrapper hope this can help you

pre, div {
    width:100%;
    overflow: auto !important;
}

working demo

Solution 2

The easier way to do this would be to add this to the Html

<td class="first">
    <div>Don ovonMrLongNameIsMe!!!</div>
</td>

and this to the CSS

div {
    overflow:auto;    
}

td {
    border: 1px solid rgb(0,0,0);
    min-width: 100px;
    max-width: 100px;
}

Working Example:

    div {
        overflow:auto;    
    }

    td {
        border: 1px solid rgb(0,0,0);
        min-width: 100px;
        max-width: 100px;
    }

<table>    
  <tr>
    <td class="first">
        <div>Don ovonMrLongNameIsMe!!!</div>
    </td>
  </tr>
</table>