Title with dynamic placement

[Jriker1]

I have a website that has multiple views based on three items:

1. Desktop
2. Phone
3. Tablet

I use media queries to adjust the widths of content.  Here's my problem.  Page is PHP and you can pass &showone=1 as part of the URL to only show one table.  With two tables looks like this:

 

 

Text is perfectly centered over tables but as you can see, tables are left justified and space on the right.  Normally title would center in the middle of the right table due to centering on the "page".

 

I did this basically hard coded thru media queries so:

/* desktop */
@media only screen and (min-width : 1224px) 
  {
    th { font-size: 1.6em; font-family:Sans-serif; }
    td { font-size: 1.65em; line-height: 1em; font-family:Sans-serif;}
    h1 { font-size: 1.75em; line-height: 1.5em; }
    h2 { font-size: 1.25em; }
    table { width: 500px; align: left; }
    .centering {width: 1020px; padding-top:5px; border:0; margin-top:2px; text-align: center; font-size: 1.6em; font-family: Sans-serif; font-weight:bold;}
  }

The .centering being passed using

echo "<p class='centering'>Pool Mining: " . strtoupper($obj['multiport']['mining']) . "</p>";

Now if someone says they only want one table I get:

 

 

See the problem then?  The centering doesn't move over the first table as that's the only element left.  Didn't expect it would the way it's setup.  I can't figure an easy way based on the dynamic nature of the content, to tweak the placement of the titles based on the total content.  I also have this issue with iPad in landscape mode.  Ipad and iPhone in portrait mode the tables reorientate under each other so one table or two space us across is the same.  Thoughts on how to get this to work?  Tried doing a div with inline-block but it causes the second table to go under the first line all the time.  Oddly tab on IE to another tab and tab back they were side-by-side again but not really a working solution and all other devices that didn't work at all.

 

Thoughts?

 

Thanks.

Edited September 13, 2013 by Jriker1

[Jriker1]

Figured out a "way" to do it.  Since I'm using PHP, if I know the there will be only one table, I can redefine the media queries in the body of the page output as long as it comes before those styles are used.  Which it does.