Overflow: automatic not working in Firefox

Question

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

The width is set to 100px. In only Firefox, text in excess of 100 pixels is not hidden and replaced with a scroll bar.

How to hide content and have a scrollbar when it exceeds the width of the container?

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

Answer 1

this question from here may solve your problem

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

try putting overflow:auto on wrapper hope this helps you

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

demo works

Answer 2

An easier way to do this is to add this to the HTML

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

and this is for 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>