3 Any copyright is dedicated to the Public Domain.
4 http://creativecommons.org/publicdomain/zero/1.0/
8 <title>Reference: stretching table items with auto-margins and/or orthogonal writing-mode
</title>
9 <link rel=
"author" title=
"Mats Palmgren" href=
"https://bugzilla.mozilla.org/show_bug.cgi?id=1316051">
10 <style type=
"text/css">
11 * { vertical-align: top
; }
14 border: 3px solid grey
;
16 padding: 10px 4px 3px 6px;
23 background: lightgrey
;
25 caption
{ border: 1px dashed blue
;}
26 x
{ display:block
; width:16px; height:16px; }
27 t
{ display:block
; width:20px; height:20px; }
29 .hma10 { margin: 7px 3px 1px 0; }
30 .hmaa { margin: 7px 0 1px 0; }
31 .vma10 { margin: 0 7px 3px 1px; }
32 .vmaa { margin: 0 7px 0 1px; }
34 .js { justify-self: start
; }
35 .je { justify-self: end
; }
36 .jc { justify-self: center
; }
37 .as { align-self: start
; }
38 .ae { align-self: end
; }
39 .ac { align-self: center
; }
41 .vr { writing-mode: vertical-rl
; }
46 <div class=
"grid"><table cellpadding=
0 cellspacing=
0 class=
"hma10 je"><caption><x></x></caption><td><t></t></td></table></div>
47 <div class=
"grid"><table cellpadding=
0 cellspacing=
0 class=
"hmaa jc"><caption><x></x></caption><td><t></t></td></table></div>
48 <div class=
"grid"><table cellpadding=
0 cellspacing=
0 class=
"vr hma10 je"><caption><x></x></caption><td><t></t></td></table></div>
49 <div class=
"grid"><table cellpadding=
0 cellspacing=
0 class=
"vr hmaa jc"><caption><x></x></caption><td><t></t></td></table></div>
50 <div class=
"grid"><table cellpadding=
0 cellspacing=
0 class=
"vr" style=
"height:60px; width:82px"><caption><x></x></caption><td><t></t></td></table></div>
52 <div class=
"grid"><table cellpadding=
0 cellspacing=
0 class=
"vma10 ae"><caption><x></x></caption><td><t></t></td></table></div>
53 <div class=
"grid"><table cellpadding=
0 cellspacing=
0 class=
"vmaa ac"><caption><x></x></caption><td><t></t></td></table></div>
54 <div class=
"grid"><table cellpadding=
0 cellspacing=
0 class=
"vr vma10 ae"><caption><x></x></caption><td><t></t></td></table></div>
55 <div class=
"grid"><table cellpadding=
0 cellspacing=
0 class=
"vr vmaa ac"><caption><x></x></caption><td><t></t></td></table></div>
57 <div class=
"grid"><table cellpadding=
0 cellspacing=
0 style=
"height:34px; width:100px"><caption class=
"hma10 js"><x></x></caption><td><t></t></td></table></div>
58 <div class=
"grid"><table cellpadding=
0 cellspacing=
0 style=
"height:34px; width:100px"><caption class=
"hmaa js"><x></x></caption><td><t></t></td></table></div>
59 <div class=
"grid"><table cellpadding=
0 cellspacing=
0 style=
"height:39px; width:100px"><caption class=
"vma10"><x></x></caption><td><t></t></td></table></div>
60 <div class=
"grid"><table cellpadding=
0 cellspacing=
0 style=
"height:42px; width:100px"><caption class=
"vmaa"><x></x></caption><td><t></t></td></table></div>
61 <div class=
"grid"><table cellpadding=
0 cellspacing=
0 class=
"vr" style=
"height:60px; width:79px"><caption class=
"hma10"><x></x></caption><td><t></t></td></table></div>
62 <div class=
"grid"><table cellpadding=
0 cellspacing=
0 class=
"vr" style=
"height:60px; width:82px"><caption class=
"hmaa"><x></x></caption><td><t></t></td></table></div>
63 <div class=
"grid"><table cellpadding=
0 cellspacing=
0 class=
"vr" style=
"height:60px; width:74px"><caption class=
"vma10 js"><x></x></caption><td><t></t></td></table></div>
64 <div class=
"grid"><table cellpadding=
0 cellspacing=
0 class=
"vr" style=
"height:60px; width:74px"><caption class=
"vmaa js"><x></x></caption><td><t></t></td></table></div>