harrisloris
New Member
Consider this fiddle: http://jsfiddle.net/BSaWt/1/\[code\]<style>table { width: 100%;}td, th { /* Should be as tight as possible on all resolutions */ width: 5%;}.fixedWidth1 { /* Should allways be 90px or smaller */ max-width: 90px;}.fixedWidth1 img { width: 100%; height: auto;}.dynWidth { /* Should allways eat up all remaining width, but be cut if screen width is smaller than table width */ overflow: hidden; text-overflow: ellipsis; max-width: 60%}.dynWidth > a { display: block;}.dynWidth > span { display: inline;}</style><table> <tr> <th>col1</th> <th>col2</th> <th>col3</th> <th>col4</th> <th>col5</th> <th>col6</th> </tr> <tr> <td class="fixedWidth1"> <a href="http://stackoverflow.com/questions/15494613/#"><img src="http://stackoverflow.com/questions/15494613/category.png" /></a> </td> <td class="dynWidth"> <a href="http://stackoverflow.com/questions/15494613/#"><span>A.Way.Too.Large.Text.Which.Cannot.Be.Broken.up.This.ruins.my.entire.layout</span></a> <span>This column also contains other elements, but they are not a problem. The problem with this column, is that it does not shrink! I want it to cut off text if the space available to the table shrinks.</span> </td> <td>Should resize</td> <td>Should resize</td> <td>Should resize</td> <td>Should resize</td> </tr></table>\[/code\]I know I can make the table respect widths by using table-layout: fixed. But by using this it will not scale properly. I want the table to be responsive. That's the main issue. The other fact is that all TD,TH elements should be as tight as possible for all resolutions except the two first columns. The first column has an explicit pixel width set, the second column should resize to all available remaining width.This works fine on large resolutions, but when available width decreases the text in the second column prevents the table from scaling down. Is there a way to make overflow actually cut the text off so that the table can scale down to any size?