Question

我正在尝试在标题表上创建一个包含Vertical Text和avatart的表。

结果应该是这样的：

所以我的问题是：
1）我应该在我的css文件中做什么才能使文本旋转270deg（使.rotate（270deg）;混乱一切）
2）名称在头像顶部对齐？
3）它适用于谷歌浏览器但不适用于Firefox :(

以下是我的演示：http://codepen.io/anon/pen/CogKe

这是我的代码：

.rotate(@deg){
  -webkit-transform: rotate(@deg);

}
table th.user span.name{
  display:block;
  .rotate(90deg);
  padding: 190px 0 0 0;
  position: relative;
  left: 20px;
  width: 200px;
}
table, td, th
{
border:1px solid green;
}
.user, tbody td {
  max-width: 50px;
  text-align: center
}

Answer 1

请尝试此操作以避免跨浏览器文本轮换问题

.rotate {
     -moz-transform: rotate(270deg);  /* FF3.5+ */
       -o-transform: rotate(270deg);  /* Opera 10.5 */
  -webkit-transform: rotate(270deg);  /* Saf3.1+, Chrome */
             filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=270);  /* IE6,IE7 */
         -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=270)"; /* IE8 */
}

Vertical (rotated) text in HTML table

标题列中具有头像的标签的垂直文本

1 个答案: