display table like li

I have a table with 2 td cells.
How can I display them 1 next to the other like an <li>  using css?
rivkamakAsked:
Who is Participating?
 
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
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
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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
 
rivkamakAuthor Commented:
I am unable to change the table. it has to stay that way. Is there something I can do with the css?
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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
 
HagayMandelCommented:
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
 
COBOLdinosaurCommented:
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
 
rivkamakAuthor Commented:
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
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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
 
rivkamakAuthor Commented:
<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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.