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!

Register Log in
  • 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

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
 
Sort by date Sort by votes
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
 
Upvote 0 Downvote
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 :)
 
Upvote 0 Downvote
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]
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
115
lmcate
lmcate
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
128
Alt255
Alt255
scorney
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
345
3esolar
3
PeDa
  • Locked
  • Question
Media query: display = none/inline/block 1
Replies
1
Views
388
PeDa
PeDa
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
366
pmonett
pmonett

Part and Inventory Search

Sponsor

Back
Top