Q:

Rotate an image inside Table-head without increasing the width or the column

Rotate an image by fixing the width of the table head. 
DEMO
Please look at the demo. The width of the columns should be just around 30px but not reflecting as the image width ( which is rotated ) is a lot more.
Want to have a rotated image and still keep a small width ( The width of the rotated image will fit into the td with ease, but unable to make it so)
Tried several methods, unable to get the required result. Any help is appreciated. 
Code
<div class="bs-example">
<table class="table">
   <thead>
     <tr>
       <th>#</th>
      <th class="rotate"><image src="http://example.com/NKV2Yt" height="20" /></th>
      <th class="rotate"><image src="http://example.com/NKV2Yt" height="20" /></th>
      <th class="rotate"><image src="http://example.com/NKV2Yt" height="20" /></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>M</td>
      <td>O</td>
      <td>@</td>
    </tr>
    <tr>
      <td>2</td>
      <td>J</td>
      <td>T</td>
      <td>@</td>
    </tr>
    <tr>
      <td>3</td>
      <td>L</td>
      <td>t</td>
      <td>@</td>
    </tr>
  </tbody>
</table>
</div><!-- /example -->

CSS ==> 
th{
  height:200px;
  width:30px !important;
}
.rotate{
  -webkit-transform: rotate(-90deg);  /* Chrome, Safari 3.1+ */
 -moz-transform: rotate(-90deg);  /* Firefox 3.5-15 */
  -ms-transform: rotate(-90deg);  /* IE 9 */
   -o-transform: rotate(-90deg);  /* Opera 10.50-12.00 */
      transform: rotate(-90deg);  /* Firefox 16+, IE 10+, Opera 12.10+ */
}

A:

I've come across this problem before myself. Only solution I found was to wrap the images in another element, give that a relative position and absolute position the image to that element 
table{
  margin: 20px 0 0 30px;}
tr,td,th{
  border: 1px solid;
}
th{
  height:100px;
  width:30px;
}
.rotate img {
  -webkit-transform: rotate(-90deg);  /* Chrome, Safari 3.1+ */
     -moz-transform: rotate(-90deg);  /* Firefox 3.5-15 */
      -ms-transform: rotate(-90deg);  /* IE 9 */
       -o-transform: rotate(-90deg);  /* Opera 10.50-12.00 */
          transform: rotate(-90deg);  /* Firefox 16+, IE 10+, Opera 12.10+ */

}

.rotate span {
  position:relative;
  width:30px;
  height:100px;
  display:block;
}

.rotate span img {
  position: absolute;
  left:-15px;
  top:50px
}

The wrap your images in a span
<th class="rotate"><span><image src="http://goo.gl/NKV2Yt" height="20" /></span></th>

Updated example here http://cssdeck.com/labs/tnbuiyv8

