List of tables, nowrap until end of available width

Discussion in 'HTML' started by Sjaakie, Mar 22, 2005.

  1. Sjaakie

    Sjaakie Guest

    Hi!

    Is it possible to display a number of tables that will wrap just like
    normal text?

    Whenever I put some tables in line (<table>...</table><table>...</table>
    etc), every table will be placed on a new line. I want them to wrap at
    the end of the available clientwidth...

    Thanks in advance!
    Sjaakie, Mar 22, 2005
    #1
    1. Advertising

  2. Sjaakie

    Steve Pugh Guest

    Sjaakie <sjaakie@_SPAMSTOP_bigfoot.com> wrote:

    >Is it possible to display a number of tables that will wrap just like
    >normal text?


    display: inline-table;

    Shame about the support from browsers (Opera and Safari support it,
    Mozilla and IE don't).

    >Whenever I put some tables in line (<table>...</table><table>...</table>
    >etc), every table will be placed on a new line. I want them to wrap at
    >the end of the available clientwidth...


    float: left; applied to each table. Not perfect, especially if the
    tables are different heights. Some fine tuning or other solutions
    appropriate to your sitiuation would need more details about exactly
    what you are trying to acheive.

    Steve

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
    Steve Pugh, Mar 22, 2005
    #2
    1. Advertising

  3. Sjaakie <sjaakie@_SPAMSTOP_bigfoot.com> wrote:

    > Is it possible to display a number of tables that will wrap just
    > like normal text?


    Yes. Use align="left" in the <table> tags or, equivalently, use
    float: left for the table elements in CSS. In either approach, make
    sure to stop the floating after the last table if relevant, using
    <br clear="all"> or clear: both in CSS (for the element after the
    tables).

    You can use the CSS technique for things other than tables, too, though
    the elements usually need to have their widths set somehow to make
    things work. Tables are a bit special as block elements: normally the
    default width of a block is the entire available width minus margins
    and padding, i.e. 100%, no matter how little content you have; but a
    table by default occupies just as much width as needed for its content.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html
    Jukka K. Korpela, Mar 22, 2005
    #3
  4. Sjaakie

    Sjaakie Guest

    Sjaakie wrote:
    > Hi!
    >
    > Is it possible to display a number of tables that will wrap just like
    > normal text?
    >
    > Whenever I put some tables in line (<table>...</table><table>...</table>
    > etc), every table will be placed on a new line. I want them to wrap at
    > the end of the available clientwidth...
    >
    > Thanks in advance!


    Thanks for the replies.

    I ended up with some JavaScript-ASP-scripting, which is called upon
    clicking on a photoalbum-link:

    function changeAlbum(album) {
    location.href = '<%= Request.ServerVariables("SCRIPT_NAME")
    %>?a='+album+'&w='+document.getElementById("oTable").clientWidth;
    }

    Using variabel 'w' (tablewidth) I am able to calculate available
    horizontal space.

    When looping through all files in a certain directory I can now
    calculate when to end the table row and start a new.

    Although code below is ASP (offtopic for this group), it might interest
    you...
    --
    <table id="oTable" width="100%"><tr><td></td></tr>
    <table>
    <%
    set fs=Server.CreateObject("Scripting.FileSystemObject")
    set albumFolder = fs.GetFolder("/photos/")
    set photos = albumFolder.files

    Dim counter ' processed records
    counter = 0

    For Each file in photos
    if (counter mod (CInt(Request.QueryString("w")/170)) = 0) then
    response.write("</tr><tr>")
    end if

    Response.Write _
    "<td>" & _
    "<table width=125 cellpadding=5 cellspacing=0
    bgcolor=""#FF9933"">" & _
    "<tr><td bgcolor=#000000>" & _
    "<table cellspacing=0 cellpadding=0 width=100% ><tr>" & _
    "<td style=""color:#fff;font-size:8pt;"">(" &
    formatnumber(file.Size/1024, 2) & " kB)</td>" & _
    "<td align=right style=""color:#fff"">[ <a
    href=""javascript:delPhoto('" & file.Name & "');""><B>X</B></a> ]</td>" & _
    "</tr></table>" & _
    "</td></tr>" & _
    "<tr><td align=center>" & _
    "<img src=""/photos/" & Request.QueryString("a") & "/" &
    file.Name & """ alt=""" & file.Name & """>" & _
    "</td></tr>" & _
    "<tr height=1><td bgcolor=#000000></td></tr>" & _
    "</table>" & _
    "</td>" & vbCrlf

    counter = counter + 1
    Next

    %>
    </table>
    Sjaakie, Mar 22, 2005
    #4
  5. Sjaakie

    Sjaakie Guest

    Steve Pugh wrote:
    > Sjaakie <sjaakie@_SPAMSTOP_bigfoot.com> wrote:
    >
    >>Whenever I put some tables in line (<table>...</table><table>...</table>
    >>etc), every table will be placed on a new line. I want them to wrap at
    >>the end of the available clientwidth...

    >
    >
    > float: left; applied to each table. Not perfect, especially if the
    > tables are different heights. Some fine tuning or other solutions
    > appropriate to your sitiuation would need more details about exactly
    > what you are trying to acheive.
    >
    > Steve


    Thanks, that does exactly what I meant!
    Sjaakie, Mar 22, 2005
    #5
    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. Brian K. Williams

    TableCell oTableCell = new TableCell(); noWrap?

    Brian K. Williams, Apr 30, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    2,490
    Brian K. Williams
    Apr 30, 2004
  2. Nathan Sokalski

    The nowrap Property of TD Tags

    Nathan Sokalski, May 21, 2005, in forum: ASP .Net
    Replies:
    2
    Views:
    5,582
    Mikhail Arkhipov (Microsoft)
    May 21, 2005
  3. AndrewF
    Replies:
    1
    Views:
    733
    Bruce Barker
    Oct 10, 2005
  4. Nathan Sokalski
    Replies:
    3
    Views:
    1,651
    Eliyahu Goldin
    Mar 28, 2007
  5. Richard Maher
    Replies:
    3
    Views:
    314
    David Mark
    Nov 7, 2009
Loading...

Share This Page