我使用以下css旋转表头单元格内的文本,但标题单元格的宽度与文本是水平的相同.如何旋转文本,宽度将自动减少..
table#MyTable tr th a{
color: #FFFFFF;
display: block;
/*Firefox*/
-moz-transform: rotate(-90deg);
/*Safari*/
-webkit-transform: rotate(-90deg);
/*Opera*/
-o-transform: rotate(-90deg);
/*IE*/
writing-mode: tb-rl;
filter: flipv fliph;
padding: 60px 1px;
}
Run Code Online (Sandbox Code Playgroud)
kiz*_*izu 41
如果你只需要调整单元格的宽度,它们只包含一行文本,你可以这样做:http://jsfiddle.net/sSP8W/3/ - width
一个元素的集合line-height
.
CSS3变换的问题在于它们像CSS一样工作position: relative
:它们的原始框保持不变,因此旋转,倾斜等不会导致元素尺寸的变化.所以:实际上没有完美的CSS解决方案,您可以使用JS来调整维度,或者尝试找到可靠的解决方法.因此,如果表中只有链接,则可以执行以下操作:http://jsfiddle.net/sSP8W/4/ - 旋转表本身.
如果您的案例中有另一个您不想轮播的内容 - 更新帖子,那么我们可以尝试找到更好的解决方案.
upd:刚刚找到了表格中旋转文本的解决方案:使用一些带有垂直填充的魔法,我们可以让单元格延伸到内容,所以请看几乎最后的例子:http://dabblet.com/gist/4072362
Job*_*son 12
我使用David Votrubec的jQuery插件和Mike在博客文章下面的评论解决了这个问题.
把它放在一个.js文件中:
(function ($) {
$.fn.rotateTableCellContent = function (options) {
/*
Version 1.0
7/2011
Written by David Votrubec (davidjs.com) and
Michal Tehnik (@Mictech) for ST-Software.com
*/
var cssClass = ((options) ? options.className : false) || "vertical";
var cellsToRotate = $('.' + cssClass, this);
var betterCells = [];
cellsToRotate.each(function () {
var cell = $(this)
, newText = cell.text()
, height = cell.height()
, width = cell.width()
, newDiv = $('<div>', { height: width, width: height })
, newInnerDiv = $('<div>', { text: newText, 'class': 'rotated' });
newInnerDiv.css('-webkit-transform-origin', (width / 2) + 'px ' + (width / 2) + 'px');
newInnerDiv.css('-moz-transform-origin', (width / 2) + 'px ' + (width / 2) + 'px');
newDiv.append(newInnerDiv);
betterCells.push(newDiv);
});
cellsToRotate.each(function (i) {
$(this).html(betterCells[i]);
});
};
})(jQuery);
Run Code Online (Sandbox Code Playgroud)
这位于页面顶部:
<script src="rotatetablecellcontent.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.yourtableclass').rotateTableCellContent();
});
</script>
Run Code Online (Sandbox Code Playgroud)
这在你的CSS中:
/* Styles for rotateTableCellContent plugin*/
table div.rotated {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
writing-mode:tb-rl;
white-space: nowrap;
}
thead th {
vertical-align: top;
}
table .vertical {
white-space: nowrap;
}
Run Code Online (Sandbox Code Playgroud)
然后确保您的表具有"yourtableclass"类,并且您想要旋转的所有TD都具有"垂直"类.
这是一个在jsFiddle中运行的演示.
希望它有所帮助,即使我迟到了一年!
小智 7
在IE和Chrome(Blink和Webkit)中,您可以将文本放在具有垂直书写模式的子项中,而不是使用变换.为您节省所有CSS和JavaScript技巧.Chrome目前有一个小的显示错误(Chrome 37),但据报道.
.vertical {
-webkit-writing-mode:vertical-rl;
-ms-writing-mode:tb-rl;
writing-mode:vertical-rl;
}
<td><span class="vertical">This text should be vertical.</span></td>
Run Code Online (Sandbox Code Playgroud)
我建议使用white-space:nowrap
表格中的垂直文本.
归档时间: |
|
查看次数: |
48157 次 |
最近记录: |