• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 781
  • Last Modified:

How to display horizontal rows

I want to display horizontal rows. Here is my problem description
I am getting rows from the database, Now I want to display values as horizontal rows, means 2 rows as a single row. Assme my record set values are
Row1
Row2
Row2
Row4
Row5
Row6
I want to display output as
Row1                  Row4
Row2                  Row5
Row3                  Row6

Assume my record set values are
Row1
Row2
Row2
Row4
Row5
I want to display output as
Row1                  Row4
Row2                  Row5
Row3                  
So I can save lot of space. Any help.

These record set values are dynamic it may return 10..40 rows based on the data
0
jyothsna1803
Asked:
jyothsna1803
  • 4
  • 3
1 Solution
 
Ali KayahanFull Stack DeveloperCommented:
<style type="text/css">
.pan{float:left;clear:both}
</style>

<div class="pan">Row1</div>
<div class="pan">Row2</div>
<div class="pan">Row3</div>
<div class="pan">Row4</div>
0
 
jyothsna1803Author Commented:
I am not sure exactly what are you talking about, I asked totally different thing.
0
 
David S.Commented:
@jyothsna1803

How is this a JavaScript question?

It would be helpful to see an example of the data.


@ali_kayahan

Now how do you make the second column? ;)
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
Ali KayahanFull Stack DeveloperCommented:
I just couldnt get the question ,
@Kravimir:
<style type="text/css">
.pan{float:left;}
</style>

<div class="pan">Row1<div class="pan">Row3</div></div>
<div class="pan">Row2<div class="pan">Row4</div></div>
0
 
Ali KayahanFull Stack DeveloperCommented:
@jyothsna1803: that what i understand from your question ;
<style type="text/css">
#col{width:200px;float:left}
#col .pan{float:left;width:100px}
</style>
<div id="col">
<div class="pan">Row1</div>
<div class="pan">Row5</div>
<div class="pan">Row2</div>
<div class="pan">Row6</div>
<div class="pan">Row3</div>
<div class="pan">Row7</div>
<div class="pan">Row4</div>
</div>
0
 
jyothsna1803Author Commented:
Query: select HospitalName  from Hospital
Result:
Lenox Hill Hospital
Burke Rehabilitation Hospital: Physician Referral Service
Bellevue Hospital
Hospital for Special Surgery
Rockefeller University Hospital
New York Presbyterian Hospital: Devereux Richard B MD
New York Presbyterian Hospital-New York Weill Cornell Medical CE: Cornell Medical
Manhattan Eye Ear & Throat Hospital: Children's Hearing Institute
St Vincent's Hospital

I want to display the result in horizontally 2 hospitals.

I am expecting the below result.

Lenox Hill Hospital      New York Presbyterian Hospital: Devereux Richard B MD
Burke Rehabilitation Hospital: Physician Referral Service      New York Presbyterian Hospital-New York Weill Cornell Medical CE: Cornell Medical
Bellevue Hospital      Manhattan Eye Ear & Throat Hospital: Children's Hearing Institute
Hospital for Special Surgery      St Vincent's Hospital
Rockefeller University Hospital      

I may add or delete the hospital any time, So my table should adjust the results accordingly.

Basically I want to divide the hospitals count by 2 and first set and second set I want to display side by side like above example.
Please help.
0
 
jyothsna1803Author Commented:
See the document for sample format.
Query.doc
0
 
jyothsna1803Author Commented:
I wrote the below code and is working fine now.
<html>
<head>

<title>TEST</title>

<style type="text/css">

<!--

html,body {
margin: 0;
padding: 0;
}

table {
width: 100%;
height: 100%;
}

div#border{

text-align: center;
margin: 1 auto;
}

div#left {
      height: 20px;
      width: 20px;
      border: 2px solid #FF0000;
      float: left;
}
div#right {
      height: 20px;
      width: 20px;
      border: 2px solid #0000FF;
      float: left;
}

div#container {
text-align: left;
margin-left: auto;
margin-right: auto;
}
-->
</style>

</head>

<body>
<fieldset>
    <legend>
    <span class="MainSubHeading">Which of the following do you receive (check all that apply):</span>
    </legend>

<table width="100%">
<tr width = "100%">
<td width = "50%">
<div id="container"><input type="checkbox" name="chk" id="chk" value="Lenox Hill Hospital">Lenox Hill Hospital</a>
<div id="container"><input type="checkbox" name="chk" id="chk" value="Burke Rehabilitation Hospital: Physician Referral Service">Burke Rehabilitation Hospital: Physician Referral Service</a>
<div id="container"><input type="checkbox" name="chk" id="chk" value="Bellevue Hospital">Bellevue Hospital</a>
<div id="container"><input type="checkbox" name="chk" id="chk" value="Hospital for Special Surgery">Hospital for Special Surgery</a>
<div id="container"><input type="checkbox" name="chk" id="chk" value="Rockefeller University Hospital">Rockefeller University Hospital</a>

</td>
<td width = "50%">
<div id="container"><input type="checkbox" name="chk" id="chk" value="New York Presbyterian Hospital: Devereux Richard B MD">New York Presbyterian Hospital: Devereux Richard B MD</a>
<div id="container"><input type="checkbox" name="chk" id="chk" value="New York Presbyterian Hospital-New York Weill Cornell Medical CE: Cornell Medical">New York Presbyterian Hospital-New York Weill Cornell Medical CE: Cornell Medical</a>
<div id="container"><input type="checkbox" name="chk" id="chk" value="Manhattan Eye Ear & Throat Hospital: Children's Hearing Institute">Manhattan Eye Ear & Throat Hospital: Children's Hearing Institute</a>
<div id="container"><input type="checkbox" name="chk" id="chk" value="St Vincent's Hospital">St Vincent's Hospital</a>
 
 



</td>
</tr>
</table>
</fieldset>
</body>

</html>

0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now