Text wrapping with table-layout: fixed

Discussion in 'HTML' started by Ryan Stewart, Nov 24, 2003.

  1. Ryan Stewart

    Ryan Stewart Guest

    The code below does almost exactly what I want it to. The only thing
    that's wrong is that the text needs to wrap if it overflows
    horizontally. By using "overflow-x: auto" in the div, you can put a
    scrollbar in that will properly display everything, but that isn't
    acceptable. Also, you can achieve the desired wrapping effect by
    specifying an absolute size rather than relative, but that's no good
    either. It needs to be a dymanically sizing table with horizontal text
    wrapping and a vertical scrollbar when needed. Ignore everthing within
    the <ul> tags. This is just a prototype and I needed some filler to
    test it.

    <html>
    <head>
    <title>A Prototype</title>
    <link rel="stylesheet" type="text/css" href="myStyle.css" />
    </head>

    <body>
    <div align="center">
    <table style="width: 100%; height: 100%; table-layout: fixed;"
    class="outer">
    <tr style="height: 1%;">
    <td align="left" valign="top" class="header">
    Aircraft
    </td>
    </tr>
    <tr>
    <td align="left" valign="top" style="width: 100%;">
    <div style="height: 100%; width: 100%; overflow-y: auto;">
    <ul>
    <li><a href="catView.html"><img src="redSquare.gif"
    border="0" />&nbsp;Category 1</a></li>
    <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;A
    Category</li>
    <li><a href="" onclick="window.open('test.doc');return
    false;"><img src="greenCircle.gif" border="0" />&nbsp;A File</a></li>
    <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;A
    very very very very very long file description that couldn't possibly
    fit in one table width. <a href="fileView.html"
    class="desc">More</a></li>
    <li><a href="" onclick="window.open('test.doc');return
    false;"><img src="greenCircle.gif" border="0" />&nbsp;A File</a></li>
    <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;A
    file description. <a href="fileView.html" class="desc">More</a></li>
    <li><a href="" onclick="window.open('test.doc');return
    false;"><img src="greenCircle.gif" border="0" />&nbsp;A File</a></li>
    <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;A
    file description. <a href="fileView.html" class="desc">More</a></li>
    <li><a href="" onclick="window.open('test.doc');return
    false;"><img src="greenCircle.gif" border="0" />&nbsp;A File</a></li>
    <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;A
    file description. <a href="fileView.html" class="desc">More</a></li>
    </ul>
    </div>
    </td>
    </tr>
    </table>
    </div>
    </body>
    </html>
     
    Ryan Stewart, Nov 24, 2003
    #1
    1. Advertising

  2. Ryan Stewart wrote:

    > The code below does almost exactly what I want it to. The only thing
    > that's wrong is that the text needs to wrap if it overflows
    > horizontally.


    [snip code & stuff]

    Changing the div width to, for instance, 50%, wraps the text.

    --
    frostie
    http://brightonfixedodds.net
     
    Robert Frost-Bridges, Nov 25, 2003
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Eric
    Replies:
    4
    Views:
    734
    clintonG
    Dec 24, 2004
  2. cpt
    Replies:
    4
    Views:
    2,524
    Toby Inkster
    Jan 11, 2005
  3. Guybrush Threepwood

    Table-based layout to CSS layout

    Guybrush Threepwood, Jun 6, 2006, in forum: HTML
    Replies:
    20
    Views:
    1,014
  4. Replies:
    1
    Views:
    586
    John Timney \(MVP\)
    Jun 19, 2006
  5. CS ADNT
    Replies:
    0
    Views:
    453
    CS ADNT
    Sep 17, 2009
Loading...

Share This Page