?
Solved

display table like li

Posted on 2013-01-12
9
Medium Priority
?
281 Views
Last Modified: 2013-01-17
I have a table with 2 td cells.
How can I display them 1 next to the other like an <li>  using css?
0
Comment
Question by:rivkamak
[X]
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
9 Comments
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 38771234
You have a table like below but you want it in one column like an li so we need to convert the table to use just one column if I am understanding you right.

http://jsbin.com/upizer/1/edit

Is this code you have control of or are you scraping it from someplace else?  If so it will probably take javascript to do this can you can't manipulate the table from 2 columns to 1 column in just css.

  <h2>Table</h2>
  <table>
    <tr>
      <td>row1 col1</td>
      <td>row1 col2</td>
    </tr>
    <tr>
      <td>row2 col1</td>
      <td>row2 col2</td>
    </tr>
    
  </table>
  <h2>li</h2>
  <ul>
    <li>row1 col1</li>
    <li>row1 col2</li>
    <li>row2 col1</li>
    <li>row2 col2</li>
  </ul>
  
  <h2>Convert Table</h2>
    <h2>Table</h2>
  <table>
    <tr>
      <td>row1 col1</td>
    </tr>
    <tr>
      <td>row1 col2</td>
    </tr>
    <tr>
      <td>row2 col1</td>
    </tr>
    <tr>
      <td>row2 col2</td>
    </tr>
    
  </table>

Open in new window

0
 

Author Comment

by:rivkamak
ID: 38771235
I am unable to change the table. it has to stay that way. Is there something I can do with the css?
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 38771275
I found some ideas taking a key from using responsive design for mobile.
Option 1 I took from http://css-tricks.com/responsive-data-tables/

sample http://jsbin.com/obicis/1/edit
/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	

	
	tr { border: 1px solid #ccc; }
	
	td { 
		/* Behave  like a "row" */
		
		position: relative;
		
	}
	

Open in new window

0
Video: Liquid Web Managed WordPress Comparisons

If you run run a WordPress, you understand the potential headaches you may face when updating your plugins and themes. Do you choose to update on the fly and risk taking down your site; or do you set up a staging, keep it in sync with your live site and use that to test updates?

 
LVL 16

Expert Comment

by:HagayMandel
ID: 38771334
How can I display them 1 next to the other like an <li>

This makes no sense: 'li' stands for list item that means that items are displayed in column. In many cases (menus tabs) designers use css to 'force' list items to be displayed one next to another, but this is not the nature of list items.
On the other hand, td elements, by definition displayed 'inline' (one next to another in a 'tr' element), so the objective of your question is not really clear.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38772143
Let's say I have this round peg and this square peg.  The hole is round so I'll use the square peg.  Can you guys help me make this square peg round?.

What planet are we on?

Cd&
0
 

Author Comment

by:rivkamak
ID: 38772783
There must be a way to take the table parts, tr and td and make them display:inline to line them up 1 side by side.
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 38772793
Did you seem my sample?  That works as far as making

row1-col1       row1-col2

become

row1-col1-row1-col2

Do you need it to be

row1-col1
row1-col2

If that is the case we need to figure out some javascript stuff.   I have done this similar thing in the past when I couldn't get a proper feed and instead used screen scraping to reconfigure a table on another site I did not have control of (and had rights to do this)  to look right on the site I was working on.  But this would be more involved and knowing the exact layout of the table.  But my option I gave you is a quick way using simple css.
0
 

Author Comment

by:rivkamak
ID: 38781311
<table class="mod_events_latest_table" width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr><td class="mod_events_latest_first" style="border-color:"><p id="title"><span class="mod_events_latest_content">Brooklyn Open House</span></p><p id="date"><span class="mod_events_latest_date">Wednesday January 23,2013</span> <br>
<span class="mod_events_latest_date">@8:00pm</span>  Congregation Beth Torah</p></td></tr>
<tr><td class="mod_events_latest" style="border-color:"><p id="title"><span class="mod_events_latest_content">Deal Open House</span></p><p id="date"><span class="mod_events_latest_date">Thursday January 31,2013</span> <br>
<span class="mod_events_latest_date">@8:00pm</span>  ILan High School</p></td></tr>
</tbody></table>

Open in new window

Instead of 2 rows, I want it to be 2 columns.
0
 
LVL 53

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 total points
ID: 38781339
Lot easier when you see the code.


Just add this at the bottom of your to your css

table.mod_events_latest_table td p {
      float: left;
      padding-right: 10px;
      padding-left: 10px;
}

And if you want to do anything fancy with your table cells.  http://coboldinosaur.com/pages/table-art.html
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

741 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