Question

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:

<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>​

CSS:

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;}

I prepared a fiddle with that test case for you to play around:
http://jsfiddle.net/UgYFs/3/

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) ?

Until now I failed to succeed. But I am just a bloody beginner in all this stylish web stuff…

Answer 1

Right, since no one had an idea I tried a different approach to what I was asking about were. I want to close this question, so I post the outcome, even if it is not a solution to what I asked here…

I succeeded to modify the rest of the app such that the way the table is filed dynamically works even when table-layout: fixed; is set. This allows me to use standard css table rules to keep that single column flexible in width but still limited in length because the whole tables width can be derived from the container now.