grid-align-baseline-table-002.html (2006B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7655#issuecomment-1248528627"> 3 <style> 4 .target { 5 display: grid; 6 grid-auto-flow: column; 7 justify-items: start; 8 position: relative; 9 writing-mode: vertical-rl; 10 } 11 .target > div, .target td { 12 background: hotpink; 13 font-size: 20px; 14 line-height: 0; 15 } 16 .target table { border-spacing: 0; } 17 .target td { padding: 5px; min-width: 5px; min-height: 5px; } 18 .target caption { 19 margin: 10px; 20 background: lime; 21 block-size: 20px; 22 } 23 .target span { 24 display: inline-block; 25 width: 1em; 26 height: 1em; 27 outline: solid cyan 3px; 28 outline-offset: -3px; 29 } 30 </style> 31 <script src="/resources/testharness.js"></script> 32 <script src="/resources/testharnessreport.js"></script> 33 <script src="/resources/check-layout-th.js"></script> 34 <body onload="checkLayout('.target > *')"> 35 36 <div class="target" style="align-items: first baseline;"> 37 <div data-offset-x="115"><span></span></div> 38 <table data-offset-x="0"> 39 <caption>top</caption> 40 <tr style="vertical-align: baseline;"> 41 <td style="font-size: 10px;"><span></span><br><span></span></td> 42 <td><span></span><br><span></span></td> 43 </tr> 44 <tr style="vertical-align: baseline;"> 45 <td><span></span><br><span></span></td> 46 <td style="font-size: 10px;"><span></span><br><span></span></td> 47 </tr> 48 <caption style="caption-side: bottom;">bottom</caption> 49 </table> 50 </div> 51 52 <div class="target" style="align-items: last baseline;"> 53 <div data-offset-x="65"><span></span></div> 54 <table data-offset-x="0"> 55 <caption>top</caption> 56 <tr style="vertical-align: baseline;"> 57 <td style="font-size: 10px;"><span></span><br><span></span></td> 58 <td><span></span><br><span></span></td> 59 </tr> 60 <tr style="vertical-align: baseline;"> 61 <td><span></span><br><span></span></td> 62 <td style="font-size: 10px;"><span></span><br><span></span></td> 63 </tr> 64 <caption style="caption-side: bottom;">bottom</caption> 65 </table> 66 </div>