我想要一个桌子有一个第一个单元格,可以堆叠几个单元格,下面的单元格具有垂直的文本,如下例所示.
.second td * {
writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
}
<table border=1><tr> <td colspan=4>This cell has colspan=4</td> </tr><tr class="second"> <td><div>Writing-mode:vertical-rl inside block</div></td> <td><div>Writing-mode:vertical-rl inside block</div></td> <td><div>Writing-mode:vertical-rl inside block</div></td> <td><div>Writing-mode:vertical-rl inside block</div></td> </tr></table> <table border=1><tr> <td colspan=4>This cell has colspan=4</td> </tr><tr class="second"> <td><a>Writing-mode:vertical-rl inside inline</a></td> <td><a>Writing-mode:vertical-rl inside inline</a></td> <td><a>Writing-mode:vertical-rl inside inline</a></td> <td><a>Writing-mode:vertical-rl inside inline</a></td> </tr></table>
在除Safari之外的每个浏览器中,都会生成包含横向文本的正确大小的单元格. Safari可能会折叠它们(如果容器是块)或扩展它们,就像它们是水平的(如果容器是内联的).
我提交了bug to Webkit,但直到那时,我想使用这种模式,所以我正在寻找一种方法,保留大部分这种结构,并且能够在垂直文本上使用colspan.实际使用情况比较复杂,所以简单地将固定宽度设置在某处不是一个可行的解决方案.
我尝试将表作为显示：flex和nesting列重新实现行方向flex,但遇到同样的错误,这次在Firefox中也是如此.
解决方法
使用jQuery简单的修复(你可以使用纯js,如果你想,我想你也可以使用css(sass / less),但这是我的解决方案.
首先我检查一下userAgent,如果是将Firefox设置为div和a的内嵌块.否则只是使用flex.
对于每个td div和td,获取子div或宽度并分配给父td的宽度
var display = 'flex';
if (navigator.userAgent.search("Firefox") > -1) {
display = 'inline-block';
}
$("td div,td a").each(function() {
self = $(this);
self.css('display',display);
self.closest('td').width(self.width());
});
.second td * {
writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border=1>
<tr>
<td colspan=4>This cell has colspan=4</td>
</tr>
<tr class="second">
<td>
<div>Writing-mode:vertical-rl inside block</div>
</td>
<td>
<div>Writing-mode:vertical-rl inside block</div>
</td>
<td>
<div>Writing-mode:vertical-rl inside block</div>
</td>
<td>
<div>Writing-mode:vertical-rl inside block</div>
</td>
</tr>
</table>
<table border=1>
<tr>
<td colspan=4>This cell has colspan=4</td>
</tr>
<tr class="second">
<td id="thistd"><a id="this">Writing-mode:vertical-rl inside inline</a></td>
<td><a>Writing-mode:vertical-rl inside inline</a></td>
<td><a>Writing-mode:vertical-rl inside inline</a></td>
<td><a>Writing-mode:vertical-rl inside inline</a></td>
</tr>
</table>
看起来像垂直-r1不是很好地支持… hummmmm尽量避免它现在我猜
https://www.w3.org/International/tests/repo/results/writing-mode-vertical
