PDA

Click to See Complete Forum and Search --> : how to use overflow css to prevent td contents from increasing width of cell

ajsefk
09-16-2005, 03:35 PM
Hi, I am trying to build a table of a specific width, relative to the window size, containing equally-sized table cells (TDs).

The content of these table cells is not known in advance (this is generated HTML). The trouble occurs when the TD content is long, thus widening the table cell and distorting the layout.

What I would LIKE to happen is for the TDs to retain their natural widths, but for the content within the TD to be CLIPPED. I tried using overflow:hidden, and various other CSS properties, but no luck.

The other restriction is that the text cannot wrap; it must use only a single line.

The whole thing is demonstrated by the following HTML (also present here, at http://www.geocities.com/asefkow/css/tablewidth.htm). The content is long, because it contains a description of the problem.

I would appreciate any help with this!

-Andy

---------------

<html>
<head>
<title>css test</title>

<style type="text/css">
td {
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
border:1px solid blue
}
</style>

</head>
<body style="font-family:tahoma">

<p>The table is supposed to be 80% of the window width; each TD is 50% of that.</p>

<table border=1 style="width:80%">
<tr>
<td style="width:50%">this is some short text</td>
<td style="width:50%">this is some much much longer text that makes this column really wide so that the table is much more than 80% of the screen</td>
</tr>
<tr>
<td style="width:50%">more text</td>
<td style="width:50%">more text</td>
</table>

<br>
<p>but the columns widths are not equal, and the table is wider than 80% typically. Here's the same table, but with short text.</p>

<table border=1 style="width:80%">
<tr>
<td style="width:50%">this is some short text</td>
<td style="width:50%">short text this time</td>
</tr>
<tr>
<td style="width:50%">more text</td>
<td style="width:50%">more text</td>
</tr>
</table>

<br>
<p>and once again with only spaces, to emphasize the point</p>

<table border=1 style="width:80%">
<tr>
<td style="width:50%">&nbsp;</td>
<td style="width:50%">&nbsp;</td>
</tr>
<tr>
<td style="width:50%">&nbsp;</td>
<td style="width:50%">&nbsp;</td>
</tr>
</table>



<br>
<br>
<p style="font-weight:bold">I would like to use CSS to clip the content of each cell, so that the table is 80% of the window width, and the two cells are equal in width (both 50% of the table). Basically, I need a way for the text to occupy only the width that the TD would normally use (i.e. for the TD to be as wide with the text as without it). I want the first table to have the same geometry as the 2nd and 3rd tables.</p>
<br>

<br>
<p>I realize I can do this with absolute width (e.g. 200px) SPANs in each TD, but I want the TD content to fill as much of the cell as possible</p>

<table border=1 style="width:80%">
<tr>
<td style="width:50%"><span style="width=200px;overflow:hidden;text-overflow:ellipsis">this is text longer than 200px generally</span></td>
<td style="width:50%"><span style="width=200px;overflow:hidden;text-overflow:ellipsis">this is some long long long long long long long long long long text</span></td>
</tr>
</table>

<br>
<br>


<br>

<p>rulers</p>

<div style="width:40%;background-color:green;color:white">40%</div>
<div style="width:80%;background-color:green;color:white">80%</div>

<br>

<div style="width:100px;background-color:red;color:white">100px</div>
<div style="width:200px;background-color:red;color:white">200px</div>
<div style="width:300px;background-color:red;color:white">300px</div>
<div style="width:400px;background-color:red;color:white">400px</div>
<div style="width:500px;background-color:red;color:white">500px</div>
<div style="width:600px;background-color:red;color:white">600px</div>

<br>
<br>

<a href="mailto:asefkow AT yahoo DOT com">asefkow AT yahoo DOT com</a>
bogbrushian
09-16-2005, 04:28 PM
i suggest doing it all by css and not tables. www.w3schools.com
coothead
09-16-2005, 04:47 PM
Hi there ajsefk,

here is a simple example...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224">
<html>
<head>
<title>horizontal scroll</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
body {
background-color:#fff;
font-family:verdana,arial,helvetica,sans-serif;
font-size:16px;
color:#000;
}
#tbl {
border:1px solid #000;
}
#cell {
border:1px solid #000;
width:200px;
height:36px;
}
#cell div {
width:200px;
height:36px;
overflow:auto;
}
#cell pre {
margin:0px;
}
-->
</style>

</head>
<body>
<table id="tbl"><tr>
<td id="cell">
<div><pre> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent blandit venenatis purus. Integer massa libero, vehicula id, consequat sed, tincidunt nec, purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse potenti.</pre></div>
</td>
</tr></table>

</body>
</html>

coothead
ajsefk
09-16-2005, 06:38 PM
Thanks for the replies. bogbrushian, sure going pure CSS would be nice, but what I didn't mention was that this is only part of a much larger system. I'm stuck with the table-based layout. I essentially have a case where the text that is being entered into the TDs is longer than expected, distorting the layout, so I would like to truncate the text at the point where it no longer affects the table layout. Make sense?

coothead, I downloaded and played around with your code, and while it makes perfect sense, it doesn't address my particular issue -- I believe. This is because you are still using a hardcoded value for the width (i.e. 200px on the cell and cell.div). I want the cell width to be a proportional value (e.g. 50%) and really the cell.div to fill up the entire cell, but not make it grow larger it would normally be (i.e. if it were empty, say).

Any more ideas? Thanks in advance...
CyCo
09-17-2005, 06:08 AM
I essentially have a case where the text that is being entered into the TDs is longer than expected, distorting the layout, so I would like to truncate the text at the point where it no longer affects the table layout. Make sense?
Maybe something like this?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Style-Type" content="text/css">
<title>css test</title>
<style type="text/css">

table {
width: 80%;
border: 1px solid #ccc;
}

td {
width: 50%;
border: 1px solid blue;
}


div {
height: 1.2em;
overflow: hidden;
}

</style>

</head>
<body>
<table>
<tr>
<td><div>this is some short text</div></td>
<td><div>this is some much much longer text that makes this column really wide so that the table is much more than 80% of
the screen</div></td>
</tr>
<tr>
<td><div>more text</div></td>
<td><div>more text</div></td>
</tr>
</table>
</body>
</html>
ray326
09-17-2005, 05:00 PM
You have to give something a fixed dimension since tables are meant to be stretchy. If you can assign a fixed height then you can use your percentage widths.

td { width: 33%; height: 2em; }
td div { width:100%;height:100%;overflow:hidden }

<table border="1" summary="x" style="width:300px;">
<tr><td>x</td><td><div>y</div></td><td>z</td></tr>
<tr><td>x</td><td><div>Now is the time for all good men</div></td><td>z</td></tr>
<tr><td>x</td><td><div>y</div></td><td>z</td></tr>
</table>
ajsefk
09-20-2005, 05:23 PM
CyCo, at first glance, I think that works! I am going to try to integrate this solution into our product -- will come back later to confirm that it indeed works. Thanks a million for your help.
ajsefk
09-21-2005, 03:57 PM
Actually, no, it's not quite what I was after, though I admit it's clever... yours clips in the vertical direction, by using a fixed height. Although that is close, what I really want is the clipping to occur in the horizontal direction. I need the overflow to happen this way, because I want to use text-overflow:ellipsis to indicate to the user that the entire content is not being seen.

Perhaps this is just not possible, alas. My first attempt (above) was to use white-space:nowrap to keep everything on one line, but I could not figure out how to tell the <table> that it didn't have to stretch further.

Oh well. Thanks everyone for your help nonetheless.
ajsefk
10-28-2005, 06:31 PM
I found a solution here:
http://www.blakems.com/archives/000077.html

IT uses a combination of text-layout and text-overflow. By embedding a little <table> with text-layout:fixed and width=100% inside each cell -- not ideal, I know -- I can use text-overflow:ellipsis to achieve the result I want!
Vic
10-28-2005, 09:44 PM
... or you can do style='table-layout: fixed' for <table> and all columns will be firmly set to whatever you specify for the first row - no stretching and faster rendering as the table will go out as it is created.