Posted by Shailesh Humbad on 02/16/06 03:32

Mitja Trampus wrote:
> humbads wrote:
>> | Text One | Text Two | Text Three | Text Four |
> >
>> The effect I would like to achieve is automatic clipping of the text
>> when the window is narrowed. This way, none of the cells become hidden
>> when the browser window is narrow. The content of each cell would be
>> left-aligned and clipped instead, something like this:
>>
>> |Text On|Text Tw|Text Th| Text Fo|
>
>
> Just use overflow:hidden to achieve the clipping. In order to assure
> cells are equally wide, use table-layout:fixed.
> As Steve and Greg suggested, it might be better to use DIVs unless your
> data really is tabular.
>
> <style>
> td {white-space:nowrap;border:solid black 1px; text-align:center;
> overflow:hidden}
> table {table-layout:fixed; width:100%}
> </style>
>
> <table>
> <tr>
> <td>some text here</td>
> <td>and some more in the second cell</td>
> <td>this is shorter</td>
> <td>shortest</td>
> </tr>
> </table>
>
> HTH
> Mitja


Thanks. That really helps. I was unfamiliar with the overflow settings.
Your example works in FF1.5, IE6, and opera 8.5, which is good enough
for my internal application. This is for a navigation bar containing
links in a fixed-height frame along the top of the window. When in
800x600, the horizontal scroll bar was being displayed, which was
obscuring most of the buttons. I didn't want to disable the scroll bar,
and users of my app. are not sophisticated enough to know about resizing
frames. So I think this will work best.

[Back to original message]