Log in / Register

Forum › How do I...?

Overflow: hidden in a table

anthonyn
I have been trying for a while to get a table cell to hide it's content if it extends past it's size. To prevent the text from wrapping, I also have to use the white-space: nowrap; but this causes the table cell to expand to the size of it's contents instead of cutting off the contents as desired.

This is a simple example of what I have tried. 
<html>
	<head>
		<title>prince test</title>
	</head>
	<body>
		<table style="width: 100%;">
			<tr>
				<td style="width: 50%;border: 1px solid black; overflow: hidden; white-space: nowrap;">This has lots and lots of text.This has lots and lots of text.This has lots and lots of text.This has lots and lots of text.This has lots and lots of text.This has lots and lots of text.This has lots and lots of text.This has lots and lots of text.This has lots and lots of text.This has lots and lots of text.This has lots and lots of text.This has lots and lots of text.This has lots and lots of text.This has lots and lots of text.This has lots and lots of text.
				</td>
				<td style="width: 50%;border: 1px solid black;">Not so much text
				</td>
			</tr>
		</table>
		
	</body>
</html>


Can you think of any way to accomplish this?
mikeday
Try applying "table-layout: fixed" to the table.
anthonyn
That worked. Thanks!