Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

overflow: hidden won't work for me

Status
Not open for further replies.

AndyGroom

Programmer
May 23, 2001
972
GB
I've got this simple HTML:

Code:
<html>
<body>

<table width=100 height=100 style='{ table-layout: fixed; }'>
<tr><td style='{ overflow: hidden; }'>
This is a bit of text that I only expect to see part of because the cell is only 100x100px.
</td></tr>
</table>

</body>
</html>

What I am hoping to see is truncated text occupying a cell 100x100px, but the cell expands to show the whole lot. I can't see what I'm doing wrong, any help please?

Also, is there a way to apply overflow:hidden to every cell on every table on an HTML page?

- Andy
___________________________________________________________________
If you think nobody cares you're alive, try missing a couple of mortgage payments
 
first off your syntax is wrong
Code:
style="overflow: hidden;"
secondly give your td fixed dimensions
Code:
<td width="100px" height="100px">
thirdly dont use tables

try giving this element a class
Code:
.hidden {overflow: hidden;}

<td class="hidden">blah blah blah</td>

Darryn Cooke
| The New Orange County Graphic designer and Marketing and Advertising Consultant
| Marketing and Advertising blog
 
Personally, I'd use div's instead of tables, but thats just a preference.
You can just go:
Code:
td {overflow: hidden;}
To apply it to all cells in all tables in the html document.
Hope that helps :)

Gareth :)
 
To be honest, it is much harder to control overflow of table cells than is of other elements. As others have suggested, if this is not a specifically tabular data, I would advise going with divs. Even if it is, you might find that the easiest and most browser-compliant solution is to use a div inside a table cell, with its size defined and overflow set to hidden.

Regardless of using divs or table cells, you must know that you always have to define width/height when you want to work with overflow, since html elements by default stretch to fit the contents.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Darryn's syntax is not quite right. You can either put this:
Code:
<td style="width:100px; height:100px">
or this:
Code:
<td width="100" height="100">
The [tt]px[/tt] bit is not valid or required in [tt]height[/tt] or [tt]width[/tt] attributes - they're always measured in pixels.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top