HTML Grid - JavaScript and AJAX forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

HTML Grid

Splitting Records in multiple Columns

kadnan

1:12 pm on Nov 15, 2005 (gmt 0)

10+ Year Member

i have more than 100 records which i can`t show in single column as List as it require lots of scrolling,I want to show them in multiple columns,say 10/column,which should create 10 columns in grid format,these records could varry,for instance if records go 75,it should make 8 columns.

any guide pls,?

Thanks

-adnan

ajkimoto

2:46 pm on Nov 15, 2005 (gmt 0)

10+ Year Member

kadnan,

Why not use CSS to set up your input boxes, something like this:

<style type="text/css">
#boxDiv input{
float: left;
margin-left: 10px;
}
</style>

</head>

<body>
<div id="boxDiv">
<input type="text" name="text1" />
<input type="text" name="text2" />
<input type="text" name="text3" />
<input type="text" name="text4" />
<input type="text" name="text5" />
<input type="text" name="text6" />
<input type="text" name="text7" />
<input type="text" name="text8" />
<input type="text" name="text9" />
<input type="text" name="text10" />
<input type="text" name="text11" />
<input type="text" name="text12" />
<input type="text" name="text13" />
<input type="text" name="text14" />
<input type="text" name="text15" />
<input type="text" name="text16" />
<input type="text" name="text17" />
<input type="text" name="text18" />
<input type="text" name="text19" />
<input type="text" name="text20" />
<input type="text" name="text21" />
<input type="text" name="text22" />
<input type="text" name="text23" />
<input type="text" name="text24" />
<input type="text" name="text25" />
<input type="text" name="text26" />
<input type="text" name="text27" />
<input type="text" name="text28" />
<input type="text" name="text29" />
<input type="text" name="text30" />
<input type="text" name="text31" />
<input type="text" name="text32" />
<input type="text" name="text33" />
<input type="text" name="text34" />
<input type="text" name="text35" />
<input type="text" name="text36" />
<input type="text" name="text37" />
<input type="text" name="text38" />
<input type="text" name="text39" />
<input type="text" name="text40" />
<input type="text" name="text41" />
<input type="text" name="text42" />
<input type="text" name="text43" />
<input type="text" name="text44" />
<input type="text" name="text45" />
<input type="text" name="text46" />
<input type="text" name="text47" />
<input type="text" name="text48" />
<input type="text" name="text49" />
<input type="text" name="text50" />
</div>
</body>

</html>

Will automatically put the textboxes into as many columns as the screen width will fit. Of course, this will not put them in order across then down, not down t hen across.

Hope this helps,

ajkimoto

kadnan

4:57 am on Nov 16, 2005 (gmt 0)

10+ Year Member

why textboxes?i dont have to edit the data,just Display.

if there are 50 Records in a row,i want to split them in two columns

ajkimoto

2:18 pm on Nov 16, 2005 (gmt 0)

10+ Year Member

Kadnan,

Sorry about the textboxes--I must have been looking at two messages at once.

If the technique is acceptable, you can use divs to display your data instead of textboxes and use nearly the same style definition. You will need to set up some kind of width style on each div to keep things looking like a grid so here we have set the width of each div inside the #boxDiv to 100px. I have also set up a border on each div to emphasize the structure and set 3px margins on all sides of each div:

<style type="text/css">
#boxDiv div{
float: left;
margin: 3px;
border: 1px solid #c4000;
width: 100px;
}
</style>
</head>

<div id="boxDiv">
<div>12</div>
<div>22</div>
<div>232</div>
<div>2333</div>
<div>22</div>
<div>12</div>
<div>2</div>
<div>232</div>
<div>3</div>
<div>45</div>
<div>4534</div>
<div>6546</div>
</div>

ajkimoto