Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

How to display horizontal rows

Posted on 2008-06-19
8
776 Views
Last Modified: 2011-10-19
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
Comment
Question by:jyothsna1803
  • 4
  • 3
8 Comments
 
LVL 14

Expert Comment

by:ali_kayahan
ID: 21823507
<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
 

Author Comment

by:jyothsna1803
ID: 21826064
I am not sure exactly what are you talking about, I asked totally different thing.
0
 
LVL 42

Expert Comment

by:David S.
ID: 21828792
@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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 14

Expert Comment

by:ali_kayahan
ID: 21829060
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
 
LVL 14

Expert Comment

by:ali_kayahan
ID: 21829105
@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
 

Author Comment

by:jyothsna1803
ID: 21831972
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
 

Author Comment

by:jyothsna1803
ID: 21831990
See the document for sample format.
Query.doc
0
 

Accepted Solution

by:
jyothsna1803 earned 0 total points
ID: 21848199
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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Make Session back to empty 9 30
Add or delete table rows 10 53
Explain this javascript function to me 2 25
Possible propagation problem 1 21
Active Directory replication delay is the cause to many problems.  Here is a super easy script to force Active Directory replication to all sites with by using an elevated PowerShell command prompt, and a tool to verify your changes.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Learn the basics of if, else, and elif statements in Python 2.7. Use "if" statements to test a specified condition.: The structure of an if statement is as follows: (CODE) Use "else" statements to allow the execution of an alternative, if the …
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question