title: CSS skew transform in IE7
body: <p>I am trying to skey the headers of a table using CSS.
  It works ok in IE9 but in IE7, the headers are skewed, but clipped. </p>
  
  <p>Here is the fiddle
  <a href="http://jsfiddle.net/sWVrM/3/" rel="nofollow">http://jsfiddle.net/sWVrM/3/</a></p>
  
  <p>Here is the code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;&lt;p&gt;ABD&lt;/p&gt;&lt;/th&gt;
              &lt;th&gt;&lt;p&gt;QWE&lt;/p&gt;&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>table thead tr th {
      background: #ebf6fe;
      overflow: hidden;
      padding: 0.5em;
      white-space: nowrap;
      display: block;
      outline: 2px solid;
      filter: progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=-0.9999999999999977, M21=0, M22=1, SizingMethod='auto expand');
  }
  
  table thead tr th p {
      writing-mode: tb-rl;
      filter: progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=1.2246467991473532e-16, M21=-1.2246467991473532e-16, M22=-1, SizingMethod='auto expand');
      background-color: #ebf6fe;
  }
  </code></pre>
  
  <p>I have tried setting the width, min-width, adding padding... but nothing works!</p>
  
  <p>Also, the outline does not get skewed. If anyone knows how to do that too that would be great!</p>