Question

I’ve been confused for hours at this now; trying to make the table stay fully centred without a border. It seems for some reason that the table centres when a border is added to it i.e. -table.backColor {border: 1px solid;} rather than transparent…

Any help will be really appreciated.

The CSS ive been using is:

   body {margin: 0;
   }

   td.backColorContent {
          width: 800px; 
          border-right-width: 1px; 
          border-right-style: solid;
          border-right-color: #cbe775;          
          border-left-width: 1px; 
          border-left-style: solid;
          border-left-color: #cbe775;            
          }
   td.backColorSide {
          background-color: #f9ffe7;
          vertical-align:top;
          }


   table.backColor {
                                        position: fixed; 
                                        top: 0px; 
                                        margin-left:auto; 
                                        margin-right:auto; 
                                        width: 100%; 
                                        height: 6000px; 
                                        z-index: -2; 
                                        border-collapse: collapse;
                                        border: 1px transparent;
          }  

The HTML of the table is:

<table class="backColor">
 <tr>
  <td class="backColorSide">

  </td>
  <td class="backColorContent">

  </td>
  <td class="backColorSide">

  </td>
 </tr>
</table>

A link to the example ive been using is here: http://www.nybblemouse.com/external/test2.html

Answer 1

You need to re-construct your markup and apply styles in this way :

My Fiddle