Off center a variable width table

Question

I center a variable width table with css as:

#article {width=1000px}
table.center {margin: 0 auto}

<div id="article">
<table class="center">
.....
</table>
</div>

But in this case I like to off center this table a bit to the left.
Be aware that the width of this table is variable.
The center of the table must be on 40% off the div it's in.
Suppose in case below the table has a width 200px.
Normally while centering it has 400px space on the left and right side.
But now I like to have 300px at the left and 500px at the right of the table.

#article {width=1000px}
table.offcenter20left { ??? }

<div id="article">
<table class="offcenter20left">
....
</table>
</div>

What CSS code do I need to off-center this table?

Answer 1

With the use of a wrapper, you could use a negative margin. This supports percent values and will allow it to be dynamic.

HTML

<div class="article">
  <div class="wrapper">
    <table class="offcenter20left">
      <tr>
        <td>.....</td>
      </tr>
    </table>
  </div>
</div>

CSS

table.offcenter20left {
  margin:0 auto;
}

.wrapper {
  margin-left:-20%; /* adjust as desired */
}

Source: http://jsfiddle.net/8Gas6/3
Demo: http://jsfiddle.net/8Gas6/3/show