I really could use some help with some style issue I fail to get solved: Scenario: Inside a web application I have a table visualizing a list of entries. Two of the columns can take longer content, which is chopped for display using "overflow:hidden;"and applying a "text-overflow:ellipsis". The content of all table cells is wrapped into spans so that I can apply animations whilst populating the table. All fine. Now I want to change the tables layout from its former fixed style to a more liquid behaviour. Before I had fixed width settings for the table columns. For all except two columns I keep the fixed width, even for one of the ellipsis-style-chopped columns. The other one gets a width of 100%, so that the table consumes the whole available container, thus giving a liquid style ("always use whole screen"). The column shows its content plus some whitespace which is used to pad as required. Desired behaviour: I expect the table to shrink when the windows size is decreased. This should obviously happen by reducing the width of the column set to 100%, since it is the only one without a fixed length. That part works only as long as the cells content fits in. As soon as the window gets that narrow, that the content does not fit any more a scrollbar is applied by the browser. This is not what I want. Instead I want the ellipsis-style-rules to chop that cells content, so that the table actually gets smaller, maybe up to a min-width. Test case: HTML:\[code\]<div><table><tr> <td class="c1"><span class="ellipsis">Alfreds Futterkiste</span></td> <td class="c2"><span class="ellipsis">Maria Anders</span></td> <td class="c3"><span class="ellipsis">Germany</span></td></tr><tr> <td class="c1"><span class="ellipsis">Laughing Bacchus Winecellars</span></td> <td class="c2"><span class="ellipsis">Yoshi Tannamuri</span></td> <td class="c3"><span class="ellipsis">Canada</span></td></tr><tr class="alt"> <td class="c1"><span class="ellipsis">K?niglich Essen</span></td> <td class="c2"><span class="ellipsis">Philip Cramer</span></td> <td class="c3"><span class="ellipsis">Germany</span></td></tr></table></div>?\[/code\]CSS:\[code\]table{table-layout:fixed;width:100%;border:solid gray 1px;}/*table{table-layout:auto;width:100%;border:solid gray 1px;}*/tr{}td{}td.c1{width:100%;}td.c2{width:6em;}td.c3{width:4em;}/* formatting the clipped output */.ellipsis{display:block;overflow:hidden;white-space:nowrap;text-overflow: ellipsis;width:inherit;}/* just for the test case */div{display:block;width:90%;margin:1em;background-color:silver;}span{padding:2px;width:inherit;}\[/code\]I prepared a fiddle with that test case for you to play around: http://jsfiddle.net/UgYFs/1/When you decrease the windows width (or the width of the left bottom "Result" compartment) you can see how things work. This is the behaviour that I want. The problem: (thus this question...)This only works with a "table-layout:fixed;". Makes some sense, however there are reasons that make this option unavailable: in the real application the tables rows are inserted dynamically. This does not work with a fixed layout, at least the optical result is quite different (which also makes sense). So if I like it or not, I think I have to go with a "table-style:table" (the default). You can switch to that in the CSS compartment by uncommenting the second line, thus changing the table-layout. You see that the behaviour changes. My question: Is there a way to combine both things:
- to get the desired behaviour as described and demonstrated
- to fill the table without a fixed layout (maybe switching the layout later) ?