Ok, there seems to be two solutions. The first is to use a fixed-layout table with hard-set column widths on col elements. The columns that should shrink and grow don't have such styling; in effect, they have an "auto" width.
The advantage to the first solution is that the table renders quickly (due to the fixed layout) but the disadvantage is that you must be able to estimate the content length in the fixed columns. If a field gets populated with a lot of data, it may be cut off and never be shown (due to the static column width). The third table shown here implements this first idea: http://curby.net/pub/temp/indexer_test.htm The second possibility is to enclose the contents of the variable-width column in a styled div, and keep the auto-layout of the table. This makes the table more flexible, as the other columns can shrink or grow to fit their content. (There might be caveats to this method, as I've only briefly tried it on a simple example.) Any comments? --Mike On 10/18/06, Curby <[EMAIL PROTECTED]> wrote: > Ok, I notice that gmail also has "table-layout: fixed" for the table, > so i tried applying that. It got the clipping to work, but it set > every column to be the same width, as shown in the second table here: > > http://curby.net/pub/temp/indexer_test.htm > > How does gmail get a fixed layout table to use different widths for > columns? I'm probably really close now, so any hints would be most > appreciated. Thanks! > > --Mike > > On 10/18/06, Curby <[EMAIL PROTECTED]> wrote: > > The idea is to have a column in a table of static content where enough > > content is displayed to take up the full width of the table cell as > > the table's width changes. Here's an example of a file listing, > > displayed in a table: > > > > Wide table: > > > > | Filename | Size | Date | > > | short name.txt | 5kb | 2006-10-4 | > > | extremely long name.txt | 2kb | 2005-01-08 | > > > > When the window/table is resized to be smaller: > > > > | Filename | Size | Date | > > | short name.txt | 5kb | 2006-10-4 | > > | extremely long name.txt | 2kb | 2005-01-08 | > > > > Then with clipping for narrower widths: > > > > | Filename | Size | Date | > > | short name.txt | 5kb | 2006-10-4 | > > | extremely long na | 2kb | 2005-01-08 | > > > > The trick is to do it without using Javascript. Is there a simple > > solution for doing so? (Or any known validating and reasonably > > browser-supported solution at all?) > > > > Gmail's listings of messages in mail folders use this technique. I > > tried probing the css with the help of Firefox's webdev toolbar, but I > > was only able to find: > > > > .tlc td (line 45) > > { > > width: 100%; > > white-space: nowrap; > > overflow-x: hidden; > > overflow-y: hidden; > > } > > > > This seems to give most of the desired behavior but without the clipping. > > > > So we get this: > > > > http://curby.net/pub/temp/indexer_test.htm > > > > Here's a version with short file names so you can see how things should > > behave: > > > > http://curby.net/pub/temp/indexer_test2.htm > > > > The goal is to get things to behave like the second link above, but > > showing as much of the filename as fits comfortably. > > > > Any ideas? Thanks! > > > > --Mike > > > > P.S. Pardon the examples, which are just intended to show the table > > behavior. I know there are many rendering bugs. > > > ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
