Many websites are still displaying HTML tables with those “<table><tr><td>” tags.  The problem is, try loading a table that looks nice on your desktop computer onto a mobile device and chances are, parts of your table will no longer be visible on screen, or the table will resize and squish the content.  Tables aren’t meant to be resized so drastically, so the best solution would use HTML 5 structure and CSS to help your data look like a table but have the flexibility of breaking out of the table structure in your CSS media queries easily.

Here is a sample of the structure to imitate HTML tables without using those antiquated table tags.

<section style="display: table;">

  <header style="display: table-row;">

    <div style="display: table-cell;"></div>

    <div style="display: table-cell;"></div>

    <div style="display: table-cell;"></div>

  </header>

  <div style="display: table-row;">

    <div style="display: table-cell;"></div>

    <div style="display: table-cell;"></div>

    <div style="display: table-cell;"></div>

  </div>

</section>

 


In order for CSS z-index to work properly, the element you are applying the property to can only be “position:absolute” or “position:relative”.  Though Firefox seems to ignore with a wink to the developer and assign z-indexes as intended, this is a common issue especially with older versions of Internet Explorer, IE 9 & IE 10 and Chrome.

I found in the past that z-index is pretty squirrelly, though I’ve always found a work around to get it to work, there always seems to be a browser that won’t show it like the others.  Some developers can mount on their high horse and explain the reasons why, but most will probably admit they’ve had issues with “z-index” and objects not showing up in the browser as reliable as “layers” in Photoshop always does…

 


CSS can often be tricky.  What do we need to do to get all those pesky browsers to show things the way we want?!  Sometimes, I marvel at the patience of people who find out, after hours, just how to nudge something properly one way or get the body of text to flow and display just the way they’re asked to do it.  So, something so basic, why is it sometimes so much trouble?  And do we need to write all this just to center a block?!  Why can’t we just say “align:center”?!  Don’t get me started on VERTICAL alignment, that’s not nearly as easy as table cells made such a trick out to be….

Add this to any of your CSS or inline where needed and make sure no other margins are defined:


margin-left:auto;margin-right:auto;

Note:  Be sure a width and height of this block element is also defined!