在不增加宽度或列的情况下旋转Table-head中的图像

Question

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

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

想要有一个旋转的图像，仍然保持一个小的宽度(旋转图像的宽度将适合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

Answer 2

Try max-width for th

max-width: 30px;