Forcint 3 row layout dynamically

[rosh1e]

Hi,

Does anyone know how I can force my table to be in a 3 row format with the number of columns created dynamically. As I would like items to be displayed in a fixed div. However I want them to be able to scroll through the table with horizontal as opposed to vertical scroll bars. When I've tried it, it comes out in a 3 column format, with the 4th row hidden from view.

In summary I would like a new column to be created for every 4th item. I have done this using tables, but I was told that I was using too many as each item was wrapped in a table which was in turn wrapped in a table cell, which when the number of cells created hit 4 a new column was created. Here's a static version of what I had orignally:

<table bgcolor="#FFFDFD" cellspacing="3">
<tr>
<td>
<table>
<tr>
<td>
<div id="mainpicture" onMouseOver='document.getElementById("picturedetails").style.visibility =
"visible";' onMouseOut='document.getElementById("picturedetails").style.visibility = "hidden";'>
<a href=""><img src ="../images/products/dresses/dr10164bluefront.jpg" border=0 height="160" width=
"120" /></a>
</div>
<div id="picturedetails" onMouseOver='document.getElementById("picturedetails").style.visibility =
"visible";' onMouseOut='document.getElementById("picturedetails").style.visibility = "hidden";'>
Hello you please work
<br />Yes
<br />yes
</div>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
<div id="mainpicture" onMouseOver='document.getElementById("picturedetails").style.visibility =
"visible";' onMouseOut='document.getElementById("picturedetails").style.visibility = "hidden";'>
<a href=""><img src ="../images/products/dresses/dr10109blackfront.jpg" border=0 height="160" width=
"120" /></a>
</div>
<div id="picturedetails" onMouseOver='document.getElementById("picturedetails").style.visibility =
"visible";' onMouseOut='document.getElementById("picturedetails").style.visibility = "hidden";'>
Hello you please work
<br />Yes
<br />yes
</div>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
<div id="mainpicture" onMouseOver='document.getElementById("picturedetails").style.visibility =
"visible";' onMouseOut='document.getElementById("picturedetails").style.visibility = "hidden";'>
<a href=""><img src ="../images/products/dresses/dr10173brownfront.jpg" border=0 height="160" width=
"120" /></a>
</div>
<div id="picturedetails" onMouseOver='document.getElementById("picturedetails").style.visibility =
"visible";' onMouseOut='document.getElementById("picturedetails").style.visibility = "hidden";'>
Hello you please work
<br />Yes
<br />yes
</div>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
<div id="mainpicture" onMouseOver='document.getElementById("picturedetails").style.visibility =
"visible";' onMouseOut='document.getElementById("picturedetails").style.visibility = "hidden";'>
<a href=""><img src ="../images/products/dresses/dr10198greyfront.jpg" border=0 height="160" width=
"120" /></a>
</div>
<div id="picturedetails" onMouseOver='document.getElementById("picturedetails").style.visibility =
"visible";' onMouseOut='document.getElementById("picturedetails").style.visibility = "hidden";'>
Hello you please work
<br />Yes
<br />yes
</div>
</td>
</tr>
</table>
</td>
</tr>


Hope that makes sense, I'd like to know the most efficient way to do this and any help would be appreciated as I'm stuck.

Thank you in advance

 

[Tarwn]

I'm not sure why you have the inner tables, they don't appear to be doing anything except defining space that you have already defined by your outer table (unless you have some CSS applied to them?).

My opinion would be to use a vertical scrollbar rather than a horizontal scrollbar, as that is what your users will be used to and switching it up could confuse them. But it's up to you.

Once you remove the inner tables, really all the rest of the work is going to in whatever server-side language you are using. Different languages have different restrictions. ASP.Net will allow you to add extra columns without prior calculation, since it is rendered after the fact, but PHP or Classic ASP will require you to calculate your needs ahead of time.

Example of outer table without extra inner tables:

<table bgcolor="#FFFDFD" cellspacing="3">
      <tr>
        <td>
           <div id="mainpicture" onMouseOver='document.getElementById("picturedetails").style.visibility = "visible";' onMouseOut='document.getElementById("picturedetails").style.visibility = "hidden";'>
           <a href=""><img src ="../images/products/dresses/dr10164bluefront.jpg" border=0 height="160" width="120" /></a>                        
           </div>
           <div id="picturedetails" onMouseOver='document.getElementById("picturedetails").style.visibility = "visible";' onMouseOut='document.getElementById("picturedetails").style.visibility = "hidden";'>
              Hello you please work
              <br />Yes
              <br />yes
           </div>                         
        </td>
        <td>
           <div id="mainpicture" onMouseOver='document.getElementById("picturedetails").style.visibility = "visible";' onMouseOut='document.getElementById("picturedetails").style.visibility = "hidden";'>
           <a href=""><img src ="../images/products/dresses/dr10109blackfront.jpg" border=0 height="160" width="120" /></a>                        
           </div>
           <div id="picturedetails" onMouseOver='document.getElementById("picturedetails").style.visibility ="visible";' onMouseOut='document.getElementById("picturedetails").style.visibility = "hidden";'>
               Hello you please work
               <br />Yes
               <br />yes
            </div>                         
        </td>
        ...

-T