www.webdeveloper.com
Results 1 to 10 of 10

Thread: how to use overflow css to prevent td contents from increasing width of cell

  1. #1
    Join Date
    Sep 2005
    Posts
    5

    how to use overflow css to prevent td contents from increasing width of cell

    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>

  2. #2
    Join Date
    Nov 2004
    Location
    England
    Posts
    139
    i suggest doing it all by css and not tables. www.w3schools.com
    "Oh they have the Internet on computers now." - Homer Simpson

    "Me fail English? That's Unpossible!" - Ralph Wiggum

    Ian Hunter
    My Site: Hunters Online

  3. #3
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,460
    Hi there ajsefk,

    here is a simple example...
    Code:
    <!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

  4. #4
    Join Date
    Sep 2005
    Posts
    5
    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...

  5. #5
    Join Date
    Jan 2003
    Location
    USA
    Posts
    687
    Quote Originally Posted by ajsefk
    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?
    Code:
    <!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>
    Last edited by CyCo; 09-17-2005 at 06:31 AM.

  6. #6
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    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.
    HTML Code:
    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>
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  7. #7
    Join Date
    Sep 2005
    Posts
    5
    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.

  8. #8
    Join Date
    Sep 2005
    Posts
    5
    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.

  9. #9
    Join Date
    Sep 2005
    Posts
    5

    Solution

    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!

  10. #10
    Join Date
    May 2005
    Posts
    230
    ... 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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles