Overflow not working for div inside a td
css, css-tables, javascript, jquery
Solution
You may want to try adding following css rules:
#table{
table-layout:fixed;
overflow:hidden;
white-space: nowrap;
}
Please check more in this post.
Problem
so I am trying to have the overflow property working for a div inside a td. However, I am setting the width of the td in terms of percentages. Therefore, I can't set the width of the div (inside the td) with a fix number of pixels, since I will not know it in advance. ``` <table id="table"> <thead> <tr> <th>column 1</th> <th>column 2</th> </tr> </thead> <tbody> <tr> <td><div class="cell">Aaaaaaaaaaaaaabbbbbbbbba</div></td> <td><div class="cell">bbbbbbbbbbbbbaaaaaaaaaaabb</div></td> </tr> </tbody> </table> #table { width:100px !important; } th { width:16% !important; border: 1px solid black; } .cell{ width:100%; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; -webkit-text-overflow: ellipsis; white-space: nowrap; } ``` http://jsfiddle.net/2Sync/ Any ideas?! Thanks a lot!