I'd like a table to have a first cell which colspans several cells and the ones beneath to have vertical text, like the following example.
.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>In every browser except Safari, this produces properly-sized cells containing sideways text. Safari either collapses them (if the container is block) or expands them as if they were horizontal (if the container is inline).
I've submitted the bug to Webkit, but until then, I'd like to use this pattern, so I'm looking for a way around it that preserves most of this structure and the ability to use colspan above vertical text. The actual use case is more complex, so simply setting fixed widths somewhere is not a viable solution.
I attempted reimplementing the table as display: flex and nesting column within row-direction flex, but encountered the same bug, this time in Firefox as well.
1 Answers
Answers 1
AFAIK vertical writing modes address blocks, not inline stuff. It's intended to rotate blocks. Ref: https://www.w3.org/TR/css-writing-modes-3/#block-flow-direction
This contains a somewhat similar question: Container of vertical writing mode elements uses their height to compute the container's width and the solution provided was to remove the inline-block on the child element. So from this: http://jsfiddle.net/zw8Gr/1/ to this: http://jsfiddle.net/zw8Gr/10/ by removing the display:inline-block they had.
In your case adding a display:block to the contacts of your cells that you put in vertical mode helps a bit. While it doesn't fix everything by a long shot, it might be a start. It makes them all at least react in the same (bad) way.
Essentially making the css:
.second td>* { -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; display:block ; } 
0 comments:
Post a Comment