html - 在不增加宽度或列的情况下旋转表头内的图像

Question

通过固定表头的宽度来旋转图像。

DEMO

请看演示。列的宽度应该在 30px 左右，但不会反射(reflect)图像宽度(旋转后)要大得多。

想有一个旋转的图像并仍然保持较小的宽度(旋转图像的宽度将很容易地适应td，但无法做到这一点)

尝试了几种方法，都没有得到想要的结果。任何帮助表示赞赏。

代码

<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+ */
}

Answer 1

我之前遇到过这个问题。我找到的唯一解决方案是将图像包装在另一个元素中，给该元素一个相对位置和绝对位置图像到该元素

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
}

将你的图像包裹在一个 span 中

<th class="rotate"><span><image src="http://goo.gl/NKV2Yt" height="20" /></span></th>

此处更新示例 http://cssdeck.com/labs/tnbuiyv8