Posted by Mitja Trampus on 02/15/06 21:33

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

[Back to original message]