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

【问题标题】：Rotate an image inside Table-head without increasing the width or the column在不增加宽度或列的情况下旋转表头内的图像
【发布时间】：2014-05-03 09:56:57
【问题描述】：

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

DEMO

请看演示。列的宽度应该在 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+ */
}

【问题讨论】：

标签： html css html-table rotation width

【解决方案1】：

试试max-width 换成th

max-width: 30px;

【讨论】：

【解决方案2】：

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

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
}

将图像包装在一个跨度中

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

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

【讨论】：

谢谢，会检查并通知您。