Making table style content work on a PC/Mac and mobile devices HTML CSS etc.

I have a table with 4 <TD> in each row. Looks horrible on mobile devices.

What is the best way to display 4 fields inline when it fits, but have each field be on top of one another when it doesnt?


PC:

Field 1        Field 2           Field 3           Field 4
Field 1        Field 2           Field 3           Field 4
Field 1        Field 2           Field 3           Field 4
Field 1        Field 2           Field 3           Field 4



Mobile:

Field1
Field2
Field3
Field4

Field1
Field2
Field3
Field4

Field1
Field2
Field3
Field4

Field1
Field2
Field3
Field4



I've tried DIVs and SPANs in different combinations with different styles, I just can't get anything to work this way.
What is the standard approach here?
Mike MillerSoftware EngineerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dave BaldwinFixer of ProblemsCommented:
<td>s won't do that at all.  <span> is inline.  <div>s with a fixed width and 'float: left;' will slide down as the screen width narrows.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
COBOLdinosaurCommented:
if you need the table tags because you need support for things like vertical allignment, you could try doing the divs with display table-cell, an I believe you can still float them, I know i have done that an been able to use position and generally float reacts similar to position.

Cd&
0
Mike MillerSoftware EngineerAuthor Commented:
The float:left divs are actually aligned the way I need it, but everything is in the upper left corner of the page now. How do I evenly space the contents, centered across the page?

 ____________________________________________________________________________________________________
| Field 1                                      Field 2                                          Field 3                                          Field 4 |
| Field 1                                      Field 2                                          Field 3                                          Field 4 |
| Field 1                                      Field 2                                          Field 3                                          Field 4 |
| Field 1                                      Field 2                                          Field 3                                          Field 4 |
 --------------------------------------------------------------------------------------------------------------------------------------------
0
Mike MillerSoftware EngineerAuthor Commented:
I think I got it. I just put all mu divs in a container with a 100% width then did my divs like:
<div style="float:left;margin:0 auto;width:25%;">
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.