List of tables, nowrap until end of available width

[Sjaakie]

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!

 

[Steve Pugh]

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

 

[Jukka K. Korpela]

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.

 

[Sjaakie]

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]

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!