Solved

display table like li

Posted on 2013-01-12
9
262 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
9 Comments
 
LVL 52

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 52

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
 
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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 52

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 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

707 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now