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?
 
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
 
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
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.